如何使用javascript將隱藏的div標簽的內容推到表行？

Question

我有一個帶有添加更多按鈕的表，它在其中添加了一定數量的帶有輸入的行。 但是這些行的HTML字符串已經足夠大，這變得很痛苦。 因此，我在想的是讓div隱藏標簽具有所需的HTML，並在單擊添加更多按鈕時一次又一次地重復該標簽。 因此，如何將div標簽推入TR內部。 下面是我需要推送的代碼，因此我將其保留在隱藏的DIV標簽內。

<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>

如果我直接插入特定TR（即div標簽的innerHTML）之后，則無法正確插入。 怎么做？

Answer 1

如果您要克隆一個表行，請使用另一個表行，而不是div。 而且不要使用innerHTML，請使用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>

如果發現較舊的IE在display:table-row遇到困難，請嘗試切換visibility 。

Answer 2

即使DIV被隱藏（它是無效的標記），您也不能將TR作為DIV的子級。 您無法通過在IE <9中更改表的innerHTML來修改表（盡管您可以編寫整個表或更改單元格的內容）。 使用DOM方法。

最好的方法可能是克隆一行，然后更新名稱和id屬性，以及需要它的其他所有內容，並將其附加到TBODY。 如果將其附加到TABLE，則大多數瀏覽器都可以，但是IE會禁止，因此將其附加到TBODY。

極其簡單的示例：

<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>