jquery实现jsp中的table中行tr的增加和删除_jquery 控制增加删除tr-CSDN博客

本文链接：https://blog.csdn.net/qq_34383510/article/details/120153384

该博客介绍了如何利用jQuery在JSP页面中实现表格行的动态添加和删除功能。通过`clone()`方法增加新的表格行，并使用`remove()`方法删除指定行。同时，更新了输入字段的name和id属性以保持数据绑定的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例为大家分享了使用jquery实现jsp中的table中行tr的增加和删除。

1.jsp页面

代码如下（示例）：

<input class="u-btn" type="button" id="act-add" onclick="cloneTr()" value="添加" style="color: #0a9ad1"/>
<!--需要操作的列--!>
<c:if test="${userInfo.ruleInfo.rules.size() == 0}">
	<tr class="clone-td" id="tr0">
		<td class="table-header"></td>
    	<td colspan="3">
    		<input type="input" name="ruleInfo.rules[0].actOver" id="ruleInfo.rules0.actOver">
			<input type="input" name="ruleInfo.rules[0].actOffset" id="ruleInfo.rules0.actOffset"/>
			<input class="u-btn" type="button" name="act-delete[0]" onclick="deleteTr(0)" value="删除"/>
        </td>
    </tr>
</c:if>
<c:if test="${userInfo.ruleInfo.rules.size() > 0}">
	<c:forEach varStatus="rowStatus" begin="0" end="${fn:length(userInfo.ruleInfo.rules)-1}" var="index">
		<tr class="clone-td" id="tr${index}">
            <td class="table-header"></td>
            <td colspan="3">
                <input type="input" name="ruleInfo.rules[${index}].actOver" id="ruleInfo.rules${index}.actOver" value="${userInfo.ruleInfo.rules[index].actOver}" />
                <input type="input" name="ruleInfo.rules[${index}].actOffset" id="ruleInfo.rules${index}.actOffset" value="${userInfo.ruleInfo.rules[index].actOffset}"/>
				<input class="u-btn" type="button" name="act-delete[${index}]" onclick="deleteTr(${index})" value="删除" style="color: #0a9ad1"/>
            </td>
		</tr>
	</c:forEach>
</c:if>
<tr id="act_remark">
	<td class="table-header">...</td>
</tr>

2.引入js

代码如下（示例）：

增加tr 使用clone()方法

function cloneTr() {

    var $tr = $('#clone-td');
    // 添加

    var index = $('.clone-td').size();
    var tr = $tr.clone();
    tr.attr("style", "");
    tr.attr("id", "tr" + index);
    tr.attr("class", "clone-td")
    tr.find("input[name='actOver']").attr("name", "ruleInfo.rules[" + index + "].actOver");
    tr.find("input[name='ruleInfo.rules[" + index + "].actOver']").attr("id", "ruleInfo.rules" + index + ".actOver");
    tr.find("input[name='actOffset']").attr("name", "ruleInfo.rules[" + index + "].actOffset");
    tr.find("input[name='ruleInfo.rules[" + index + "].actOffset']").attr("id", "ruleInfo.rules" + index + ".actOffset");
    tr.find("input[name='act-delete']").attr("name", "act-delete[" + index + "]");
    tr.find("input[name='act-delete[" + index + "]']").attr("onclick", "deleteTd(" + index + ")");
    $('#act_remark').before(tr);
}

删除tr 使用remove()方法

function deleteTr(index) {
    var rowIndex = index + 1; //行号

    var trIndex = $('.clone-td').size();
    $("#tr" + index).remove();  //删除tr
    if (trIndex > rowIndex) {
        $("#tr" + index).remove();  //删除tr

        for (var i = (parseInt(index) + 1); i <= trIndex - 1; i++) {
            $("#tr" + i).attr("id", "tr" + (i - 1))
            $("input[name='ruleInfo.rules[" + i + "].actOver']").attr("name", "ruleInfo.rules[" + (i - 1) + "].actOver");
            $("input[id='ruleInfo.rules" + i + ".actOver']").attr("id", "ruleInfo.rules" + (i - 1) + ".actOver");
            $("input[name='ruleInfo.rules[" + i + "].actOffset']").attr("name", "ruleInfo.rules[" + (i - 1) + "].actOffset");
            $("input[id='ruleInfo.rules" + i + ".actOffset']").attr("id", "ruleInfo.rules" + (i - 1) + ".actOffset");
            $("input[name='act-delete[" + i + "]").attr("name", "act-delete[" + (i - 1) + "]");
            $("input[name='act-delete[" + (i - 1) + "]").attr("onclick", "deleteTd(" + (i - 1) + ")");
        }
    }
}