dynamically create table rows in javascript

Question

I have multiple tables in my page, in which user will add new rows as per his need.

I have successfully created a function which takes the table id and then add new row to that specific table.

But i need to add the delete functionality as well.

This is my HTML Table

<table class="table table-responsive table-bordered order-list" id="educationTable">
    <thead>
        <tr>
            <th>Institute Name</th>
            <th>Qualification</th>
            <th>Admission Date</th>
            <th>Graduation Date</th>
            <th>Degree Scanned Image</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr id="educationTableBody">
            <td>
                <input type="text" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="number" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="email" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="password" class="form-control" name="txt[]" id="number" />
            </td>
            <td>
                <input type="text" class="form-control" name="txt[]" id="number" />
            </td>
            <td><i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
            </td>
        </tr>
    </tbody>
</table>

insTableRow function

function insTableRow(tableID) {
    var x=document.getElementById(tableID);
    var get_row = x.rows[1];
    var new_row = x.rows[1].cloneNode(true);
    $("#"+tableID+" tbody").append(new_row);
}

What I want now, that if users click on add new row icon , a new row should be added with eopty input values, and in previous row, add new row icon should be replaced with delete this row icon, and on delete row it should delete the row.

Any idea how can I achieve this ?

working JSFIDDLE

you could keep the new row hidden, and copy it and make it visible when you click the button. Obviously it should have the delete row button already there, and it should execute a function that would hide that row. — Shinra tensei, Sep 28 '17 at 08:19
I would unlock this question since it's absolutely not a duplicate of the question linked, the questions are way too different. Please, unlock it. — Shinra tensei, Sep 28 '17 at 08:21
@Shinratensei I will try to do what u proposed. and will post the answer — Noob Player, Sep 28 '17 at 08:26
you won't be able to, the question is now blocked and can't receive answers — Shinra tensei, Sep 28 '17 at 08:29
I know, if somebody else with a gold badge sees this they might be able to help — Shinra tensei, Sep 28 '17 at 08:42
ok, please see this fiddle https://jsfiddle.net/e2kw71kf/ I am haiving issue on showing hidden row. any idea ? — Noob Player, Sep 28 '17 at 08:43
important thing: you're mixing pure javascript and jQuery, don't do that, try to use only jQuery. And yes, I have an idea: https://jsfiddle.net/f6h2rs9d/ — Shinra tensei, Sep 28 '17 at 09:05

dynamically create table rows in javascript

0 Answers0