javascript - 将行动态添加到同一 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 class。