使用javascript在按钮上单击以复制div中的div

Question

我试图在单击按钮时复制整个div。 我已经使用javascript clone（）来复制div。 我发现这里的代码可以执行相同的操作。

我尝试了相同的方法。 但是我没有得到结果。 谁能帮我这个？

这是我的代码

的HTML：

<tr>
<div id="duplicater">
<tr>
<td>Service Type:</td>
<td><input type="text" name="servicetype" id="servicetype"></td>
</tr>
<tr>
<td>Amount:</td>
<td><input type="text" name="amount" id="amount"></td>
</tr>
</div>
<tr><td><button id="button" onlick="duplicate()">Add More</button></td></tr>
</tr>

Javascript：

<script>
function duplicate() 
{
var i = 0;
var original = document.getElementById('duplicater');   //alert("hi");
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplic" + ++i; // there can only be one element with an ID
//original.parentNode.appendChild(clone);
document.body.appendChild(clone);
}

jsfiddle

Answer 1

您的标记无效 。 tr元素不能有div子对象。 div元素不能有tr子元素。 标记应类似于：

<tr id="service">
    <td>
        <span>Service Type:</span>
        <input type="text" name="servicetype" id="servicetype">
    </td>
    <td>
        <span>Amount:</span>
        <input type="text" name="amount" id="amount">
    </td>
</tr>

同样，属性名称是onclick而不是onlick 。 在jsFiddle中，选择no wrap ...选项之一，否则JS解释器无法找到您的函数。

应该在duplicate函数之外定义i变量，否则结果始终为duplic1 ，也可以使用行的长度而不是计数器。 这是一个使用insertBefore在最后一行之前插入克隆元素的示例：

function duplicate() {    
    var original = document.getElementById('service');
    var rows = original.parentNode.rows;
    var i = rows.length - 1;
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplic" + (i); // there can only be one element with an ID
    original.parentNode.insertBefore(clone, rows[i]);
}

http://jsfiddle.net/4vgrvnn5/

请注意，克隆元素的后代元素具有ID，并且您当前的代码/逻辑不考虑这一点。

Answer 2

您的标记应如下所示。 即表格行应仅包含表格单元格（ <th> ， <td> ）。

<table>不应将<div>作为直接子元素，要对<td>元素进行分组，可以使用<tbody>

<table>
 <tfoot>
    <tr>
        <td>
            <button id="addmore" onclick="duplicate()">Add More</button>
        </td>
    </tr>
 </tfoot>
 <tbody id="service">
    <tr>
        <td>Service Type:
            <input type="text" name="servicetype" id="servicetype" />
        </td>
    </tr>
    <tr>
        <td>Amount:
            <input type="text" name="amount" id="amount" />
        </td>
    </tr>
 </tbody>
</table>

相应的脚本将是：

var i = 0;
function duplicate() {
  var table = document.querySelector("table"),
      original = document.getElementById('service'),
      clone = original.cloneNode(true); // "deep" clone
  clone.id = "duplic" + ++i; // there can only be one element with an ID
  table.appendChild(clone);
}

---

• 如注释中所指出的，您在onclick有一个错字。
• 计数器应在功能之外
• 如果将脚本设置为运行onload ，那么JSFiddle将脚本包装在一个onload函数中，因此内联处理程序将无法工作。 您应该将小提琴脚本设置为no-wrap或者像window.duplicate = function(){}一样显式声明该函数为全局window.duplicate = function(){} 。

更新小提琴