添加按钮 table增加一行 删减按钮 table去掉一行

该博客围绕一个AA新增功能展开,此功能可添加内容,默认展示一行列表。解决思路是页面先展示表头和一行列表,通过设置按钮的onclick函数动态拼接或删除表格行。代码实现了添加和删减按钮的功能,项目运行后可在页面动态操作。过程虽不难但耗时。

需求描述:做的一个AA新增功能,同时可以为这个即将新增的AA添加内容,而且AA的内容默认展示一行列表,点击添加按钮后出现下一行列表

解决思路:页面首先展示一个表头和列表的一行,作为默认展示的一行列表,然后对增加按钮设置onclick,在onclick函数中动态的为table拼接<tr><td>;删除行,直接调用分装好的删除table一行的函数就行,其实这个函数我当时就试了好嗷嗷嗷多遍,终于ok了,老规矩废话不多,直接上代码:

代码:html的代码table的  按钮的那个就不贴了,就是对button加个onclick就行

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="table1">
<thead>
<tr>
<th>选项</th>
<th>值</th>
<th>排序</th>
</tr>
</thead>
<tbody id="tbdy">
<tr>
<td><input type="text" name="names" id="names"/></td>
<td><input type="text" name="values" id="values"/></td>
<td><input type="text" name="sorts" id="sorts"/></td>
</tr>
</tbody>
</table>

页面展示:

 

代码:添加按钮的onclick函数和删减按钮的onclick函数 实现添加行和删减行的效果

addRowBut = function(){//添加按钮的
var str = '<tr><td><input type="text" name="names" id="names" />' + '</td><td><input type="text" name="values" id="values"/>' + '</td><td><input type="text" name="sorts" id="sorts" />' + '</td>' + '</tr>';
$("#table1").append(str);
}

cutRowBut = function (){//删减按钮的
var i= $("#table1 tr").length;//获取整个table的<tr>的个数 这个数包含了表头 恰当地说 是table的<tr>个数在加上一个<th>
if(i>2){//大于2 是因为要保留表头和表的第一行默认行
$("#table1 tr:last").remove();//js(也不知道还是jQ)反正就是封装好的删除 行 的方法了 这里要注意的是 那个last,表示从最后一行开始删。
                     //你们可以试试改变这个last,他会提示很多值first等等一大坨,我还试过first,在这里也一并说明了,就是从表的第一行开始删除,如果没有上面的if判断,直接运行这行删除代码,那就是先删除表头,再删除表的第一行,反正就是从头开始删就行了!!!
}
}

说明:这两个函数就是实现上边的添加 删减按钮的 项目跑起来后 去页面点击 就可以动态添加行或者删减行了

 

总结:刚拿到这个需求的时候,心里有点小懵逼,没做过,但是觉得还有点意思,就想着这个该怎么做,实际敲代码的过程中也是各种小问题。讲真 这个真的不是特别难,就是特别耗时间。

转载于:https://www.cnblogs.com/xuchao0506/p/9558958.html

<think>我们正在JSP中构建一个表格,每都有一个按钮用于提交该数据。 通常做法: 1. 使用HTML表格(<table>)展示数据。 2. 每一行的最后一列添加一个表单(<form>)或按钮(<button>),点击后提交该的数据。 3. 提交时,我们需要将该的关键数据(如ID)传递到服务器。 实现方式: 方式一:每一个表单(多个表单) 方式二:使用一个表单,通过JavaScript动态设置表单数据再提交(推荐,避免多个表单) 但考虑到JSP中数据通常从后端(如Servlet)传递过来,我们可以使用JSTL和EL表达式循环生成表格。 步骤: 1. 在JSP中引入JSTL核心标签库。 2. 使用<c:forEach>循环生成表格。 3. 每中放置一个按钮按钮点击时提交该的数据。 注意:为了区分不同的数据,每需要有一个唯一标识(如ID)。 示例代码: 假设我们有一个名为“userList”的列表,每个对象有id、name、age等属性。 方式一:每一个表单(简单直接,但可能产生多个表单) ```jsp <table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Action</th> </tr> <c:forEach items="${userList}" var="user"> <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.age}</td> <td> <form action="submitRow" method="post"> <input type="hidden" name="userId" value="${user.id}"> <button type="submit">提交</button> </form> </td> </tr> </c:forEach> </table> ``` 方式二:使用JavaScript(更灵活,减少重复表单) 我们可以在整个表格外放一个表单,然后每按钮点击时,将当前的数据设置到表单的隐藏域中,再提交。 ```jsp <form id="rowForm" action="submitRow" method="post"> <input type="hidden" id="userId" name="userId"> </form> <table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Action</th> </tr> <c:forEach items="${userList}" var="user"> <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.age}</td> <td> <button type="button" onclick="submitRow(${user.id})">提交</button> </td> </tr> </c:forEach> </table> <script> function submitRow(userId) { document.getElementById('userId').value = userId; document.getElementById('rowForm').submit(); } </script> ``` 方式三:使用AJAX(无刷新提交,更现代) 使用jQuery或原生JavaScript发送异步请求。 ```jsp <table border="1"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Action</th> </tr> <c:forEach items="${userList}" var="user"> <tr> <td>${user.id}</td> <td>${user.name}</td> <td>${user.age}</td> <td> <button type="button" onclick="submitRowByAjax(${user.id})">提交</button> </td> </tr> </c:forEach> </table> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> function submitRowByAjax(userId) { $.post('submitRow', { userId: userId }, function(response) { // 处理响应 alert('提交成功'); }); } </script> ``` 安全考虑:在提交数据时,应在服务器端验证用户权限,防止未授权操作。 选择哪种方式取决于具体需求: - 如果要求简单且兼容性好,方式一或方式二。 - 如果追求用户体验,方式三(AJAX)。 另外,如果表格数非常多,方式一(每一个表单)可能会生成大量重复的HTML元素,增加页面大小。而方式二和方式三则更节省。 根据用户之前的问题,他可能还希望动态添加,但本次问题焦点是每提交按钮。动态添加通常需要结合JavaScript在客户端添加,然后提交时通过AJAX或收集所有数据提交。 因此,我们给出三种方式供选择。 注意:在JSP中,我们使用EL表达式和JSTL来循环生成,所以需要确保userList已经通过request.setAttribute("userList", userList)传递到JSP。 相关问题: 1. 如何在JSP中动态添加表格并提交新增的数据? 2. 使用AJAX提交表格数据时,如何防止重复提交? 3. 在表格提交时,如何传递多个参数(而不仅仅是一个ID)?</think>在JSP中为表格每添加提交按钮并传递数据,可以通过以下方式实现: ### 解决方案代码 ```jsp <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- 获取基础路径 --%> <c:set var="basePath" value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" /> <table border="1" id="dataTable"> <thead> <tr> <th>ID</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach items="${dataList}" var="item" varStatus="status"> <tr> <td>${item.id}</td> <td>${item.name}</td> <td> <%-- 提交按钮 --%> <form action="${basePath}submitRow" method="post" style="display:inline;"> <input type="hidden" name="rowId" value="${item.id}"> <input type="hidden" name="rowData" value="${item.name}"> <button type="submit">提交</button> </form> <%-- 删除按钮 --%> <button onclick="deleteRow(${status.index})">删除</button> </td> </tr> </c:forEach> </tbody> </table> <script> // 删除函数 function deleteRow(index) { const table = document.getElementById("dataTable"); table.deleteRow(index + 1); // +1 跳过表头 } </script> ``` ### 关键实现说明 1. **表格结构** - 使用`<table>`标签创建表格 - 表头(`<thead>`)定义列标题 - 表体(`<tbody>`)使用JSTL循环生成数据 2. **每按钮实现** ```jsp <form action="${basePath}submitRow" method="post"> <input type="hidden" name="rowId" value="${item.id}"> <input type="hidden" name="rowData" value="${item.name}"> <button type="submit">提交</button> </form> ``` - 每包含独立表单 - 隐藏字段存储数据(`rowId`, `rowData`) - 提交到服务端路径`${basePath}submitRow` 3. **动态路径处理** ```jsp <c:set var="basePath" value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" /> ``` - 自动生成基础URL路径 - 支持不同部署环境(开发/生产) 4. **删除功能实现** ```javascript function deleteRow(index) { document.getElementById("dataTable").deleteRow(index + 1); } ``` - 使用原生JS操作DOM - `index + 1`跳过表头 ### 服务端处理示例 (Servlet) ```java // SubmitRowServlet.java protected void doPost(HttpServletRequest request, HttpServletResponse response) { String rowId = request.getParameter("rowId"); String rowData = request.getParameter("rowData"); System.out.println("接收到数据: ID=" + rowId + ", 内容=" + rowData); // 这里添加业务处理逻辑 } ``` ### 最佳实践建议 1. **安全防护** - 添加CSRF令牌防护 ```jsp <input type="hidden" name="csrfToken" value="${sessionScope.csrfToken}"> ``` 2. **AJAX优化** ```javascript // 使用AJAX提交避免页面刷新 $('form').submit(function(e) { e.preventDefault(); $.post($(this).attr('action'), $(this).serialize(), function() { alert('提交成功'); }); }); ``` 3. **动态添加** ```javascript function addRow() { const table = document.getElementById("dataTable"); const newRow = table.insertRow(-1); // 末尾添加 newRow.innerHTML = ` <td>NewID</td> <td>NewName</td> <td> <form action="${basePath}submitRow" method="post"> <input type="hidden" name="rowId" value="new"> <button type="submit">提交</button> </form> </td>`; } ``` ### 注意事项 1. 确保`dataList`已在request/session中设置属性 ```java request.setAttribute("dataList", yourDataSource); ``` 2. 表单字段名需与服务端参数名匹配 3. 使用CSS美化按钮样式 4. 重要操作需添加确认对话框 ```javascript button.onclick = () => confirm("确定提交?"); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值