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

Posted 2023-03-05

【中文标题】将行动态添加到同一 HTML 中的 2 个不同表中

【英文标题】：Adding rows dynamically to 2 different tables in the same HTML

【发布时间】：2016-08-29 21:20:32

【问题描述】：

我正在努力动态地将行添加到 2 个不同的表中。虽然它适用于第一个表，但我无法为第二个表复制相同的内容。我知道这可能与 JS 有关，但我无法找出确切的错误。

由于你不能对不同的元素使用相同的 id，我在 JS 中更改了 id。我应该使用类而不是 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>

【问题讨论】：

你不能在 html 页面上拥有相同的 id。请改用 class 或使用不同的 id

【参考方案1】：

您必须为表格使用不同的 id 选择器 对于第一个表 id="tab_logic1" 和第二个表 id="tab_logic"。

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

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

【参考方案2】：

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

【讨论】：

也不要复制相同的代码。更好的使用功能。