Question

我试图在点击按钮上复制整个div。我使用了javascript clone（）来复制div。我发现代码执行相同的here。

我尝试过同样的方式。但我没有得到结果。任何人都可以帮我这个吗？

这是我的代码

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解释器找不到你的功能。

i变量应在duplicate函数之外定义，否则结果始终为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(){}。

Updated Fiddle

使用javascript在按钮上复制html中的div

2 个答案: