将行动态添加到同一HTML中的2个不同表中

Question

我正在努力动态地向2个不同的表添加行。 虽然它适用于第一个表，但我无法为第二个表复制相同的表。 我知道它可能与JS有关，但我无法弄清楚确切的错误。

由于你不能为不同的元素使用相同的id，我已经改变了JS中的id。 我应该使用class而不是id吗？ 如果是这样，我该如何做到这一点？

 $(document).ready(function() { $("#add_badge").on("click", function() { // Dynamic Rows Code // Get max row id and set new id var newid = 0; $.each($("#tab_logic tr"), function() { if (parseInt($(this).data("id")) > newid) { newid = parseInt($(this).data("id")); } }); newid++; var tr = $("<tr></tr>", { id: "addr" + newid, "data-id": newid }); // loop through each td and create new elements with name of newid $.each($("#tab_logic tbody tr:nth(0) td"), function() { var cur_td = $(this); var children = cur_td.children(); // add new td and element if it has a nane if ($(this).data("name") != undefined) { var td = $("<td></td>", { "data-name": $(cur_td).data("name") }); var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val(""); c.attr("name", $(cur_td).data("name") + newid); c.appendTo($(td)); td.appendTo($(tr)); } else { var td = $("<td></td>", { 'text': $('#tab_logic tr').length }).appendTo($(tr)); } }); // add delete button and td /* $("<td></td>").append( $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>") .click(function() { $(this).closest("tr").remove(); }) ).appendTo($(tr)); */ // add the new row $(tr).appendTo($('#tab_logic')); $(tr).find("td button.row-remove").on("click", function() { $(this).closest("tr").remove(); }); }); // Sortable Code var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; $(".table-sortable tbody").sortable({ helper: fixHelperModified }).disableSelection(); $(".table-sortable thead").disableSelection(); $("#add_badge").trigger("click"); }); $(document).ready(function() { $("#add_tier").on("click", function() { // Dynamic Rows Code // Get max row id and set new id var newid = 0; $.each($("#tab_logic tr"), function() { if (parseInt($(this).data("id")) > newid) { newid = parseInt($(this).data("id")); } }); newid++; var tr = $("<tr></tr>", { id: "addr" + newid, "data-id": newid }); // loop through each td and create new elements with name of newid $.each($("#tab_logic tbody tr:nth(0) td"), function() { var cur_td = $(this); var children = cur_td.children(); // add new td and element if it has a nane if ($(this).data("name") != undefined) { var td = $("<td></td>", { "data-name": $(cur_td).data("name") }); var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val(""); c.attr("name", $(cur_td).data("name") + newid); c.appendTo($(td)); td.appendTo($(tr)); } else { var td = $("<td></td>", { 'text': $('#tab_logic tr').length }).appendTo($(tr)); } }); // add delete button and td /* $("<td></td>").append( $("<button class='btn btn-danger glyphicon glyphicon-remove row-remove'></button>") .click(function() { $(this).closest("tr").remove(); }) ).appendTo($(tr)); */ // add the new row $(tr).appendTo($('#tab_logic')); $(tr).find("td button.row-remove").on("click", function() { $(this).closest("tr").remove(); }); }); // Sortable Code var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }; $(".table-sortable tbody").sortable({ helper: fixHelperModified }).disableSelection(); $(".table-sortable thead").disableSelection(); $("#add_tier").trigger("click"); }); 

 <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="dashboard.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="../../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\\/script>') </script> <script src="../../dist/js/bootstrap.min.js"></script> <script src="dyn.js"></script> <div class="jumbotron"> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr> <th class="text-center"> Badge Name </th> <th class="text-center"> Badge ID </th> <th class="text-center"> Points required to earn the badge </th> </tr> </thead> <tbody> <tr id='addr0'> <td data-name="badge_name"> <input type="text" name='badge_name0' placeholder='For ex: Fashion Queen' class="form-control" /> </td> <td data-name="badge_id"> <input type="number" name='badge_id0' placeholder='For ex: 873200' class="form-control" /> </td> <td data-name="badge_points"> <input type="number" name='badge_points0' placeholder='For ex: 500' class="form-control" /> </td> <td data-name="del"> <button nam "del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button> </td> </tr> </tbody> </table> </div> </div> <a id="add_badge" class="btn btn-default pull-left">Create new badge</a> </div> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic"> <thead> <tr> <th class="text-center"> Tier Name </th> <th class="text-center"> Tier ID </th> <th class="text-center"> Points required to earn the tier </th> </tr> </thead> <tbody> <tr id='addr0'> <td data-name="tier_name"> <input type="text" name='tier_name0' placeholder='For ex: Gold' class="form-control" /> </td> <td data-name="tier_id"> <input type="number" name='tier_id0' placeholder='For ex: 873200' class="form-control" /> </td> <td data-name="tier_points"> <input type="number" name='tier_points0' placeholder='For ex: 500' class="form-control" /> </td> <td data-name="del"> <button nam "del0" class='btn btn-danger glyphicon glyphicon-remove row-remove'></button> </td> </tr> </tbody> </table> </div> </div> <a id="add_tier" class="btn btn-default pull-left">Create new tier</a> </div> 

Answer 1

您已经两次使用id="tab_logic" ，请使用diff类。

Answer 2

您必须为表使用不同的id选择器，如第一个表id="tab_logic1"和第二个表id =“tab_logic”。

您必须创建function addRows(selector,data){}并使用：

addRows('tab_logic1',data);
addRows('tab_logic2',data);