Question

我有以下嵌套表。

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

在第一行我有标题，在第二行我有三个选择器和一个注释框，在第三行我有一个＆＃34;添加新＆＃34;按钮。

现在，当我点击＆＃34;添加新的＆＃34;按钮，应该在#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();

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

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

1 个答案: