Question

我的页面中有多个表，用户可根据需要添加新行。

我已经成功创建了一个获取表id的函数，然后将新行添加到该特定表中。

但我还需要添加删除功能。

这是我的HTML表格

<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 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);
}

我现在想要的是，如果用户点击添加新行图标，则应添加带有eopty输入值的新行，而在上一行中，添加新行图标应替换为删除此行图标，并在删除时它应该删除该行。

我知道如何实现这一目标？

工作JSFIDDLE

在javascript中动态创建表行

0 个答案: