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

Question

我有以下嵌套表:

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

第一行是标题，第二行是三个选择器和一个评论框，第三行是"添加新"按钮。

现在，当我点击"添加新"按钮时，应该会在#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>

编辑:

我现在发现的是

$("#imgAddNew").on("click", function() {
    var cloned = $(this).parents('table.tblRating').find('tr:eq(1)').clone(true);
    cloned.insertBefore($(this).parents('table.tblRating').find('tr:last-child'));
});

这样我就可以添加新行但不能在新行中选择数据，当我点击新添加行的选择框时它指向选择第一行的框

Answer 1

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

<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();

现在你的变量中有了克隆行，你可以随意使用