jquery实现jsp中的table中行tr的增加和删除

本文实例为大家分享了使用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) + ")");
        }
    }
}