Question

我在向页面添加元素时遇到问题。我所拥有的是一个由php填充的下拉列表，我需要在用户按下添加项时复制它。我可以很好地复制它，但问题在于使它符合表格。由于我需要每个列表都拥有它自己的唯一ID，因此我无法为该行添加ID并复制，但是我尝试的代码添加了一个空行，然后选项进入下面的盒子。我有什么遗失的东西。

$(document).ready(function() 
{
    var InputsWrapper   = $("#input-table"); //Input boxes wrapper ID
    var AddButton       = $("#add-new"); //Add button ID
    var inputId=0; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {           
        var original = document.getElementById('listItem' + inputId); //Get the list box to be duplicated
        var clone = original.cloneNode(true); //Clone the original
        clone.id = 'listItem' + ++inputId; //Give the clone a unique id
        InputsWrapper.append("<tr><td>");
        InputsWrapper.append(clone); //Attach clone to parent
        InputsWrapper.append("</td></tr>");
        return false;
    });
});

Answer 1

（你忘了在你的小提琴中添加jQuery库...）

您正在将<tr>直接添加到表中，但中间应该有一个<tbody>标记。如果你将jquery选择器更改为：

，它似乎工作正常

var InputsWrapper   = $("#input-table tbody");

这是working fiddle

Answer 2

我认为问题在于你缺少一个tbody元素。

您可以使用find，clone，wrapAll和closest在jQuery中使用一个语句。

代码：

$(document).ready(function () {
    var InputsWrapper = $("#input-table"); //Input boxes wrapper ID
    var AddButton = $("#add-new"); //Add button ID
    var inputId = 0; //to keep track of text box added

    $(AddButton).click(function (e) //on add input button click
    {
        $(InputsWrapper).find('tbody:last').append($("#listItem" + inputId).clone(true, true).attr("id", "listItem" + (inputId + 1)).wrapAll("<tr><td>").closest("tr"));

        inputId++; //Give the clone a unique id

        return false;
    });
});

演示：http://jsfiddle.net/IrvinDominin/h7567/

复制元素然后将其插入表中

2 个答案: