如何使用jquery或javascript克隆表的第二行并在最后一行之前添加内容为空的内容

我有下面的嵌套表

在父表下ID为TBL的表中，我有三行

在第一行我有标题，在第二行我有三个选择器和一个注释框，在第三行我有一个“添加新”按钮

现在，当我单击“添加新”按钮时，一个新行应添加到#tblRating表中，该表与第二行相同

但新行不应复制在第二行中输入或选择的数据。在新添加行的最后一个单元格中，我要添加图像或删除添加行的复选框

<table style="width: 100%;">
    <tr id ="trRatingId" style="display:">
    <td  colspan="2" class="hedfont">
    <table id="tblRating" class="table table table-striped table-bordered tblRating">
        <tr>
            <td><bean:message bundle="tempResource" key="lbl.Statement"/></td>
            <td><bean:message bundle="tempResource" key="lbl.Frequency"/></td>
            <td><bean:message bundle="tempResource" key="lbl.CovenantType"/></td>
            <td><bean:message bundle="tempResource" key="lbl.CovenantComment"/></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <select name="statementId" id="statementId" class="form-control chosen-select" onchange="">
                    <ram:optionsNew initValue="0" selectValue="" initLabel="--Select--" group="<%=dynaStatement%>"/>
                </select>
            </td>
            <td>
                <select name="frequencyId" id="frequencyId" class="form-control chosen-select" onchange="">
                    <ram:optionsNew initValue="0" selectValue="" initLabel="--Select--" group="<%=dynaFreq%>"/>
                </select>
            </td>
            <td>
                <select name="covenantId" id="covenantId" class="form-control chosen-select" onchange="">
                    <ram:optionsNew initValue="0" selectValue="" initLabel="--Select--" group="<%=dynaCts%>"/>
                </select>
            </td>
            <td>
                <textarea rows="4" cols="50" onchange="" name="comments" id="comments" class="form-control"></textarea>
            </td>
            <td class="edit">
            When new row will get added I want add here an image for deleting row
            </td>
        </tr>
        <tr>
            <td width="" colspan="4" align="right">
                <button type="button" name="imgAddNew" id="imgAddNew" onclick="" onfocus ="" title="Add New Record" class="btn btn-primary">Add New</button>
            </td>
        </tr>
    </table>
    </td>
    </tr>
</table>

---

这样，我可以添加新行，但无法选择新行中的数据，当我单击新行中的选择框时，它指向第一行的选择框

您可以使用所需值获取隐藏的临时虚拟行，并删除按钮/图像，如下所示：

<tr name="Item" id="trItemDisplayTemp" style="display: none;">
            <td name="ItemNo"></td>
            <td name="ItemDescription"></td>
            <td>
                <input type="checkbox" disabled="disabled" name="IsPageBreak" /></td>
            <td>
                <input type="checkbox" disabled="disabled" name="IsSubTitle" /></td>
            <td>
                <input type="checkbox" disabled="disabled" name="IsQuestion" /></td>
            <td>
                <img onclick="deleteItem(this)" style="border: none; cursor: pointer;" src="~/Images/delete.png" />
                <img onclick="editItem(this)" style="border: none; cursor: pointer;" src="~/Images/edit.png" />
            </td>
        </tr>

---

现在，您的变量中有了克隆行，您可以根据需要使用它。

克隆行时，它将克隆

选择
输入及其
id
和
选定的
标签。因此，在克隆时，请更改
的
id
，选择类似
id=“statementId_2”
的内容，并将默认值
设置为选中。
<tr name="Item" id="trItemDisplayTemp" style="display: none;">
            <td name="ItemNo"></td>
            <td name="ItemDescription"></td>
            <td>
                <input type="checkbox" disabled="disabled" name="IsPageBreak" /></td>
            <td>
                <input type="checkbox" disabled="disabled" name="IsSubTitle" /></td>
            <td>
                <input type="checkbox" disabled="disabled" name="IsQuestion" /></td>
            <td>
                <img onclick="deleteItem(this)" style="border: none; cursor: pointer;" src="~/Images/delete.png" />
                <img onclick="editItem(this)" style="border: none; cursor: pointer;" src="~/Images/edit.png" />
            </td>
        </tr>

       var trItemDisplayClone = $('#trItemDisplayTemp').clone().removeAttr("id").removeAttr("style");
       $('#trItemDisplayTemp').remove();