無法在表中動態添加新行

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>