Question

我正在尝试创建表中存在的最后一列的克隆说我的最后一列包含一些下拉列表同样应该克隆并创建一个新列我不知道怎么做我试过但小帮助可以帮助我很多< / p>

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>");
        }

    });
});

工作代码here。

Javascript使用DropDown克隆HTML列

2 个答案: