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

小鱼儿 2023-10-05 21:47 14阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 js动态增加，删除td，tr，table，div

js实现的动态添加，删除table内容：截图如下： 1. ![SouthEast][] 2. ![SouthEast 1][] 源代码： main.css

川长思鸟来/ 2024年02月17日 14:15/ 0 赞/ 59 阅读

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

本文实例为大家分享了使用jquery实现jsp中的table中行tr的增加和删除。 1.jsp页面代码如下（示例）： <input class="u-btn

小鱼儿/ 2023年10月05日 21:47/ 0 赞/ 15 阅读

相关 jQuery实现增加和删除功能

代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

以你之姓@/ 2022年12月02日 12:30/ 0 赞/ 213 阅读

相关 TABLE中TR、TH和TD

1.tr标示这个表格中间的一个行 2.td标示行中的一个列,需要嵌套在<tr</tr中间 3.th 定义表头单元格。表格中的文字将以粗体显示下面的代码可以实现，tabl

客官°小女子只卖身不卖艺/ 2022年05月30日 01:09/ 0 赞/ 276 阅读

相关 js动态新增、删除table中的tr、td、input

最近做的项目需要实现动态新增、删除table中的tr、td、input，这里记录下来，以供参考需要引入jquery.min.js,自行下载引入 1、页面主体：

ゝ一纸荒年。/ 2022年05月27日 01:25/ 0 赞/ 237 阅读

相关 js在table中添加tr，删除最后一个tr

function addTable(){ var oTab = document.getElementById('tables'); v

本是古典何须时尚/ 2022年05月13日 07:12/ 0 赞/ 419 阅读

相关在页面table中通过按钮控制增加或删除一行tr

效果图 ![70][] 点击添加即出现新的一行空白数据，并赋值id；删除是根据checkbox选中一个或多个删除；废话不多说，直接上代码，相信大家可以看懂； html

我不是女神ヾ/ 2022年05月08日 11:00/ 0 赞/ 415 阅读

相关 jQuery实现简单的增加删除修改

老师带着做了一个小例子，可实现增加删除数据，勾选删除和全选删除。ISBN值不能重复，当输入相同的ISBN值时，只修改后面的书籍名。效果图如下： ![在这里插入图片描

青旅半醒/ 2022年03月06日 17:46/ 0 赞/ 226 阅读

相关 jquery 追加tr和删除tr 编辑

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <script type="text/javas

港控/mmm°/ 2022年01月16日 04:47/ 0 赞/ 295 阅读

相关 js练习------表格的增加tr删除tr（2）

（1）的方法太麻烦了所以可以直接用 innerHTML的方法来创建一个tr ![1451961-20180728110559068-212439299.png][]

Dear 丶/ 2021年09月20日 13:10/ 0 赞/ 332 阅读