无法在表中动态添加新行

Question

我正在尝试在用户端的表中添加新行。 我已经完成了，但是它只是第一次进入新行，第二次单击添加行按钮时，什么也没有发生。

 function insTableRow(tableID) { var x = document.getElementById(tableID); var get_row = x.rows[2]; get_row.style.display = ''; console.log(get_row); $("#" + tableID + " tbody").append(get_row); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i> <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> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td></td> </tr> <tr style="display:none;"> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" 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-minus-circle fa-2x fa-fw" onclick="delTableRow('educationTable')"></i></td> </tr> </tbody> </table> 

工作jsfiddle

任何想法，为什么它不第二次追加新行？

Answer 1

您的问题是因为您要选择同一行，并将其附加在每次点击后。 您不是要创建新行。 要解决此问题，您可以克隆该行并附加该新实例。

还要注意，您应该避免在HTML中使用过时的on*事件处理程序。 由于您已经在页面中包含了jQuery，因此可以使用jQuery将事件附加到HTML之外。 另外，您可以在delete图标上使用委托的事件处理程序来删除单击的行。 尝试这个：

 $('#add').click(function() { var $row = $('#educationTable').find('tr:last'); $row.clone().insertBefore($row).show(); }); $('#educationTable').on('click', '.delete', function() { $(this).closest('tr').remove(); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i id="add" class="fa fa-plus-circle fa-2x fa-fw"></i> <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> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td></td> </tr> <tr style="display:none;"> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><input type="text" class="form-control" name="txt[]" /></td> <td><i class="delete fa fa-minus-circle fa-2x fa-fw"></i></td> </tr> </tbody> </table> 

还要注意，我删除了重复的id="number"因为它是无效的HTML，无法跨多个元素重复相同的id属性。 为此使用类。

Answer 2

这个怎么样...

克隆您的初始行以创建新行，而不是显示display:none行

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

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i> <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> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td><input type="text" class="form-control" name="txt[]" id="number" /></td> <td></td> </tr> </tbody> </table>