如何使用javascript将隐藏的div标签的内容推到表行？

Question

I have a table with add more button which adds a certain number of rows with inputs in it. But the HTML string for these rows have grown large enough and its becoming a pain. So, what I am thinking is to have a div hidden tag with the required HTML that is repeated again and again on clicking the add more button. So, how to push the div tag innerHTML inside a TR. Below is the code that I need to push, so I kept it inside the hidden DIV tag.

<tr>
            <td><label for="bucket_size"><b>1.</b> Bucket Size:</label></td>
            <td><input type="text" name="bucket_size[]" id="bucket_size"></td>
            <td><label for="control_bucket_size">Control Bucket Size: </label></td>
            <td><input type="text" name="control_bucket_size[]" id="control_bucket_size" value="0"></td>
        </tr>
        <tr>
            <td><label for="from_date">Active From: </label></td>
            <td><input type="text" name="from_date[]" id="from_date" class="hasDatePicker"></td>
            <td><label for="to_date">To: </label></td>
            <td><input type="text" name="to_date[]" id="to_date" class="hasDatePicker"></td> 
        </tr>
        <tr>
            <td><label for="location">Location: </label></td>
            <td class="locationSelect">                   
            </td>
            <td style="text-align:center;" colspan="2"></td>
        </tr>

It doesn't get inserted properly if I directly insert after the particular TR, the innerHTML of the div tag. How to do it?

Answer 1

If you're trying to clone a table row then use another table row, not a div. And don't use innerHTML, use cloneNode

<table>
    <tr id="clone_me" style="display:none">
         <td>...</td>
    </tr>
</table>

<script>
var original_node = document.getElementById('clone_me');
var clone_node = original_node.cloneNode(true);
clone_node.removeAttribute('id'); // Prevent duplicate ID
try {
   clone_node.style.display = 'table-row';
}
catch(iesucks) {
   clone_node.style.display = 'block'; // Should be 'table-row' but need this hack for IE 6-7
}
original_node.parentNode.appendChild(clone_node); // Add new node to end of table
</script>

If you find older IE's struggle with display:table-row then try toggling visibility instead.

Answer 2

You can't have a TR as a child of a DIV, even if the DIV is hidden (it's invalid markup). You can't modify a table by changing its innerHTML in IE < 9 (though you can write an entire table or change the contents of a cell). Use DOM methods.

Likely the best method is to clone a row, then update name and id properties, plus anything else that needs it, and append it to the TBODY. If you append to the TABLE, most browsers are OK but IE will barf, so append to the TBODY.

Extremely simple example:

<table>
  <tr onclick="this.parentNode.appendChild(this.cloneNode(true))">
    <td>Here is a cell in a row
    <td>Here is a cell in a row
</table>