Databases
StackOverflow2013
Postsdbo
PODuplicate Rows dynamically jquery based on checkbox checked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODuplicate Rows dynamically jquery based on checkbox checked
    text
    copied!<p>I am trying to dynamically add rows based in the checkbox checked. The idea here is to duplicate the selected row. For instance, initially there is only one row. On checking the checkbox corresponding to this row, it creates a duplicate of it. If i change the dropdown values in the newly added row , and duplicate it, its not able to do it because of my hardcodedness. How can i bring about this dynamicity?</p> <pre><code>&lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $("#DuplicateRow").click(function() { var checkboxValues = []; $('input[type="checkbox"]:checked').each(function() { //alert('hi') var row = document.getElementById("row"); // find row to copy var table = document.getElementById("tabletomodify"); // find table to append to var clone = row.cloneNode(true); // copy children too clone.id = "row"; // change id or other attributes/contents table.appendChild(clone); // add new row to end of table }); }); }); &lt;/script&gt; &lt;/head&gt; &lt;table cellpadding="10" style="border:2px solid black;" id="tabletomodify"&gt; &lt;tr bgcolor="#360584"&gt; &lt;td style="border:1px solid black;" colspan="15"&gt;&lt;font face="Arial" size="4" color="white"&gt;&lt;b&gt;&lt;i&gt;Records&lt;/i&gt;&lt;/b&gt;&lt;/font&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;button id="AddRow"&gt;Add Row&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id="DuplicateRow"&gt;Duplicate Row&lt;/button&gt; &lt;/td&gt; &lt;td&gt; &lt;button id="DeleteRow"&gt;Delete Row&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr bgcolor="#360584"&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;Name &lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;Date of Birth&lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;City&lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;State&lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;Country&lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;Phone Number&lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;Mail ID&lt;/font&gt; &lt;/td&gt; &lt;td&gt;&lt;font face="Arial" size="2" color="white"&gt;Select&lt;/font&gt; &lt;/td&gt; &lt;tr id="row"&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;select&gt;&lt;option&gt;one&lt;/option&gt;&lt;option&gt;two&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;td&gt; &lt;input type="checkbox" class="checkbox"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload