带下拉列表的Javascript克隆HTML列

Question

我正在尝试创建表中存在的最后一列的克隆，说我的最后一列包含一些下拉列表，应该将其克隆并创建一个新列，我不确定该怎么做，但是小的帮助可以帮助我很多

JS小提琴输出

HTML：

<table id="tableID">
    <tr>
        <th>day</th>
        <th>
           Dropdown1
        </th>
    </tr>
    <tr>
        <td>1</td>
        <td>
            <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
                <option value="Select Subject">Select Subject</option>
                <option value="Holiday">Holiday</option>
                <option value="Lunch">Lunch</option>
                <option selected="selected" value="ECO-17">ECO-17</option>
                <option value="ECO-19">ECO-19</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>
            <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
                <option value="Select Subject">Select Subject</option>
                <option value="Holiday">Holiday</option>
                <option value="Lunch">Lunch</option>
                <option selected="selected" value="ECO-17">ECO-17</option>
                <option value="ECO-19">ECO-19</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>5</td>
        <td>
            <select id="BodyHolder_DD_Sub1" style="height:27px;width:150px;">
                <option value="Select Subject">Select Subject</option>
                <option value="Holiday">Holiday</option>
                <option value="Lunch">Lunch</option>
                <option selected="selected" value="ECO-17">ECO-17</option>
                <option value="ECO-19">ECO-19</option>
            </select>
        </td>
    </tr>
</table>
<button id="clone">Clone</button>

JS：

$("#clone").on("click", function () {
    $("#tableID tr").each(function () {
        $(this).append("<td>Test</td>");
    });
});

Answer 1

将使用jQuery复制表的最后一行并在表的最后一行之后添加：

$("#clone").on("click",function(){

var $tableBody = $('#tableID').find("tbody"),
        $trLast = $tableBody.find("tr:last"),
        $trNew = $trLast.clone();

    $trLast.after($trNew);
});

的jsfiddle

Answer 2

您可以做这样的事情首先给唯一的ID选择

select id="BodyHolder_DD_Sub1"
select id="BodyHolder_DD_Sub2"

在克隆上

$("#clone").on("click", function () {
    $(".cloned").remove(); //remove the cloned tr
    $("#tableID tr").each(function (d) {

        if (d == 0) {
            $(this).append("<td class='cloned'>Test</td>");
        } else {
            //add the select box value
            $(this).append("<td  class='cloned'>" + $("#BodyHolder_DD_Sub" + d).val() + "</td>");
        }

    });
});

这里的工作代码。