动态克隆创建的表中的遍历答案

【问题标题】：Traversal in a dynamically cloning created table动态克隆创建的表中的遍历
【发布时间】：2012-07-31 10:11:30
【问题描述】：

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

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

【问题讨论】：

请发布您的代码，并更清楚地说明为什么它不适合您。
到目前为止，您有哪些代码不起作用？请务必说明如何它不工作以及它应该做什么。

标签： jquery html html-table cloning

【解决方案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>

【讨论】：