在动态克隆创建的表中遍历

问题描述 投票:0回答:1

我创建了一个页面,我执行搜索,产品的数量以行的形式返回,其名称,价格和所有内容。使用jQuery的clone功能动态创建行。每行中都有一个复选框,也是通过克隆创建的。

我现在尝试的是遍历每一行,并根据是否选中复选框获取每行中的值。但是遍历在动态克隆表中似乎是一个问题。

jquery html html-table cloning
1个回答
1
投票

我希望我能正确理解你的挑战。此示例显示一个警报,其中包含已选中复选框的克隆行的复选框值,忽略未选中的复选框。虽然我确定这不是您正在寻找的,但您可以将此作为如何遍历克隆表的示例。

here is the example on jsFiddle.

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    $(document).ready(function() {

      var orig_table_rows = $('#original_table').children().clone();

      $("#new_table").append(orig_table_rows);

      orig_table_rows.children().each(function() {
        $(this).find("input:checked").each(function() {
          alert( $(this).val() );
        });
      });

    });

  </script>
</head>
<body>

original table:
<table id="original_table" style="border:1px solid red;">
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="not_checked_value"></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="checked_value" checked></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="another_checked_value" checked></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_name" value="not_checked_value"></td>
    <td>name</td>
    <td>price</td>
    <td>everything</td>
  </tr>
</table>

<br>
<br>

table using the cloned rows:
<table id="new_table" style="border:1px solid blue;">
</table>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.