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()方法
1 function cloneTr() { 2 3 var $tr = $('#clone-td'); 4 // 添加 5 6 var index = $('.clone-td').size(); 7 var tr = $tr.clone(); 8 tr.attr("style", ""); 9 tr.attr("id", "tr" + index); 10 tr.attr("class", "clone-td") 11 tr.find("input[name='actOver']").attr("name", "ruleInfo.rules[" + index + "].actOver"); 12 tr.find("input[name='ruleInfo.rules[" + index + "].actOver']").attr("id", "ruleInfo.rules" + index + ".actOver"); 13 tr.find("input[name='actOffset']").attr("name", "ruleInfo.rules[" + index + "].actOffset"); 14 tr.find("input[name='ruleInfo.rules[" + index + "].actOffset']").attr("id", "ruleInfo.rules" + index + ".actOffset"); 15 tr.find("input[name='act-delete']").attr("name", "act-delete[" + index + "]"); 16 tr.find("input[name='act-delete[" + index + "]']").attr("onclick", "deleteTd(" + index + ")"); 17 $('#act_remark').before(tr); 18 }
删除tr 使用remove()方法
1 function deleteTr(index) { 2 var rowIndex = index + 1; //行号 3 4 var trIndex = $('.clone-td').size(); 5 $("#tr" + index).remove(); //删除tr 6 if (trIndex > rowIndex) { 7 $("#tr" + index).remove(); //删除tr 8 9 for (var i = (parseInt(index) + 1); i <= trIndex - 1; i++) { 10 $("#tr" + i).attr("id", "tr" + (i - 1)) 11 $("input[name='ruleInfo.rules[" + i + "].actOver']").attr("name", "ruleInfo.rules[" + (i - 1) + "].actOver"); 12 $("input[id='ruleInfo.rules" + i + ".actOver']").attr("id", "ruleInfo.rules" + (i - 1) + ".actOver"); 13 $("input[name='ruleInfo.rules[" + i + "].actOffset']").attr("name", "ruleInfo.rules[" + (i - 1) + "].actOffset"); 14 $("input[id='ruleInfo.rules" + i + ".actOffset']").attr("id", "ruleInfo.rules" + (i - 1) + ".actOffset"); 15 $("input[name='act-delete[" + i + "]").attr("name", "act-delete[" + (i - 1) + "]"); 16 $("input[name='act-delete[" + (i - 1) + "]").attr("onclick", "deleteTd(" + (i - 1) + ")"); 17 } 18 } 19 }