Traversal in a dynamically cloning created table

StackOverflow https://stackoverflow.com/questions/11737800

Question

I have created a page where I perform a search and the number of products are returned in the form of a row with its name, price and everything. The rows are created dynamically using the clone feature of jQuery. There is a checkbox in each row which is also created via cloning.

What I am trying now is to traverse through each row and get the values in each row based on whether the checkbox is checked or not. But the traversal seems to be a problem here in a dynamically cloned table.

Was it helpful?

Solution

i hope that i have understood your challenge correctly. this example shows an alert with the checkbox value of cloned rows that contain a checked checkbox, ignoring those which are unchecked. while i am certain this is not exactly what you are looking for, you can use this as an example as to how to traverse the cloned table.

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top