JSP+java script开发一个有增加行删除行的表格

最新推荐文章于 2021-02-26 06:38:59 发布
最新推荐文章于 2021-02-26 06:38:59 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： javaScript入门 JSP表格页面 文章标签： java java script jsp html function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanqiezz11/article/details/38412871
版权


页面部分：

<%@ page contentType="text/html;charset=GBK"%>

<html style="height:100%">

<head>

    <title>页面标题</title>

    <jsp:include  flush="true" page="include.jsp?file=jquery,ext"></jsp:include>

</head>

<body>

    <table width="100%" border="1" cellpadding="0" cellspacing="1" style="font-size:14px;"  id="tb">

        <tr bgcolor="#EFFOF1"> 

             <td colspan="5">人员信息</td>

            <td>

             <input type="button"   value="增加行"  id="add" onClick="addrow(tb)">

             <input type="button"    value="删除行"   id="del" onClick="delrow()";>

             </td>

        </tr>

        <tr>

             <td width="15%">姓名</td>

            <td width="15%">年龄</td>

            <td width="15%">联系电话</td>

            <td width="15%">职位</td>

            <td width="15%">职龄</td>

            <td width="25%">地址</td>

        </tr>

    </table>

</body>

script部分：

<script>

    var cycleCount=0+1;

    var num=0;

    function addrow(tablename){

       num=num+1;

       var len=tablename.rows.length;

       var vtr=tablename.insertRow(len);

 

       vtr.insertCell(0).innerHTML='<td><input type="checkbox" name="ckbox"><input type="text" name="name" size="15"></td>';

       vtr.insertCell(1).innerHTML='<td><input type="text" name="age" ></td>';

       vtr.insertCell(2).innerHTML='<td><input type="text" name="address"></td>';

       vtr.insertCell(3).innerHTML='<td><input type="text" name="phone"></td>';

       vtr.insertCell(4).innerHTML='<td><input type="text" name="stat"></td>'; 

       vtr.insertCell(5).innerHTML='<td><input type="text" name="workyear"></td>';  

        cycleCount=cycleCount+1;  

        document.getElementById("cycleCount").value=cycleCount;

}


//判断是否有选中数据

function checkSelected(chs){

     for(var i=0;i<chs.length;i++){

         var ele=chs[i];

         if(ele.type=="checkbox"&&ele.checked==true)

             return true;

     }

     return false;

}


function delrow(){

     window.event.returnValue=false;

     var chs =document.getElementsByName('ckbox');

     if(!checkSelected(chs)){

          alert("请你选择要删除的数据！");

          return false;

     }else{

          if(confirm("你确定要删除选中的数据？")){

                for(var i=chs.length-1;i>=0;i--){

                     var ele=chs[i];

                     if(ele.type=="checkbox"&&ele.checked==true)

                          tb.deleteRow(i+2);   

                 }

           }

                 return false;

     }

}


</script>








薇卡
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSP中用js控制添加行，删除行
sxwhbj的博客
07-21 1414
其中涉及到样式，样式可以自己添加。增加行点击“添加”，删除行点击每一行后边的“删除”。     测试           function saveInStorage()     {        var can_submit = true;        var storageId = $("#storageId").val();        if
简单的js添加删除行
02-23
本例实现自动添加删除行的功能，功能简单了点，但是很好用希望对大家帮助
动态表格-添加删除行
06-10
autotable 动态添加或删除行示例
jsp页面实现行的增加，删除
xjpanyan3的博客
02-11 613
function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex document.getElementById('myTable').deleteRow(i) } function insertRowIn...
JSP表格动态添加行
weixin_44999932的博客
07-23 1517
<sricpt type="text/javascript"> function add(){ var trZheh =document.createElement("tr"); trZheh.id= new Date().getTime(); trZheh.innerHTML ="<td></td><td></td> document.getElementById("tb").appendChild(tr...
asp+jsp+JavaScript动态实现添加数据行
01-02
在应用程序的开发中，有些输入信息是动态的，比如我们要注册一个员工的工作经历，比如下图 如果做成死的，只能填写三个，如果是四个呢？或者更多呢，那不是添加不上去了吗，所以这样固然不好，我们可以用动态添加...
自己动手写一个java版简单云相册
09-01
在示例代码中，`delFile`函数是一个JavaScript函数，用于处理删除图片的操作，它通过DOM操作获取表格行并发送删除请求。 ```jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE ...
gddrxy静态网页(注册页面)的制作-互联网应用开发（JSP）一
03-30
在实验中，`<script type="text/javascript" src="SelfIntroductuonTable.js"></script>`引入了一个外部JS文件，其中包含了表单验证的逻辑。`onsubmit="return validate()"`在表单提交时调用`validate()`函数进行...
将jsp页面的表格导出为excel文件
04-26
本话题主要关注如何在JSP（JavaServer Pages）页面上实现表格数据的Excel导出功能。这个过程涉及到几个关键的技术点，包括HTML表格的创建、JSP与后端服务器的交互、以及Excel文件的生成。 首先，我们需要了解HTML...
最简单的JSP开发的人才招聘网（有数据库）
12-03
本项目“最简单的JSP开发的人才招聘网”是一个基于JSP技术构建的简单招聘网站，旨在帮助初学者理解和实践JSP的基础知识。JSP（JavaServer Pages）是Java平台上的动态网页技术，它将HTML代码与Java代码相结合，使得...
JavaScript动态添加和删除行
天道酬勤
12-01 1120
//添加按钮定义中的按钮    function addBtnRow() {               var table = document.getElementById(btnList);        var rownum = table.rows.length;        var newrow = table.insertRow(rownum);      
java表格可以添加删除滴代码_动态添加删除表格行的js实现代码
weixin_35638129的博客
02-26 71
//窗口表格增加一行function addNewRow(){var tabObj=document.getElementById("myTab");//获取添加数据的表格var rowsNum = tabObj.rows.length; //获取当前行数var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数var myNewRow = ...
删除表格中的某一行 java实现_js动态删除表格中的某一行
weixin_35851553的博客
02-25 370
动态创建的表格有删除功能，可以删除表格中的某一项#tab{margin-top: 20px;}#tab tr td{width: 140px;height: 30px;text-align: center;}姓名性别年龄操作var txt1=document.querySelector("#txt1")var txt2=document.getElementById("txt2")var txt3...
Jquery: 移除某行table数据
快乐每一天
03-07 308
[code="java"]function del(id) { $table=$("#tab1 tr"); $("tr[id='" + id + "']").remove(); }[/code]
javaScirpt 动态在table 插入行
a new Road
10-28 240
最近在工作的时候，遇到动态的向table 中添加行数据， javaScript 代码： 1:添加动态行函数： function addRow(){ ++rowIndex; //全局变量，用于记录增加行的标志，以便与数据输入信息的统计 var table_id = document.getElementById("table1")// table1:表示要实...
javaScriptDOM增删查改系列之删除篇
weixin_30887919的博客
07-02 43
　　突然发现，与javaScriptDom的查找方法对比一下，对DOM的删除的方法还真是少的可怜啊！我找来找去好像就只有针对DOM接点的element.removeChild(elementNode)方法和element.replaceChild(newNode,oldNode)。而针对document对象没有用于删除dom节点的方法。 　　自己的理解：为什么document对象没有删...
javasscript删除数组的3种方法
ruoge2007的专栏
05-26 312
javascript删除JSON元素 首先要搞清JSON的数据格式，我这里所说的JSON都是指javascript中的。 JSON数据是由对象和数组数据结构组成，我们只要学会javascript中对对象和数组的删除方法即可对JSON项进行删除操作 javasscript删除数组的3种方法 1，用shift()方法 shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined varchaomao=[1,2,3,4,5] varchaomao.shift()...
JSP中实现添加一行，删除一行操作
shiyuntian_wang的专栏
05-26 1万+
function numberCells() {     var count=0;     for (i=0; i     {         for (j=0; j         {             document.all.Tab.rows(i).cells(j).innerText = count;             count++;         }     } }
点击按钮增加一行表格
热门推荐
聆听
12-26 2万+
点击按钮增加一行表格 做此功能我们要用到两个方法： insertRow()： insertRow() 方法用于在表格中的指定位置插入一个新行。 insertCell() ：insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。 <%@ page language="java" contentType="text/html; char
怎么实现点击表格中每行的按钮，按钮字会变化，并且保持不变servlet+jsp
最新发布
06-07
要实现这个效果，你可以使用 JSP 和 Servlet 结合的方式来实现。 首先，你需要在 JSP 页面中创建一个表格，并在表格的每一行中添加一个按钮。按钮的文本可以是“点击”或“未点击”，根据按钮是否被点击来动态修改文本。此外，每个按钮都需要有一个唯一的 ID，以便在后续处理中进行标识。 以下是示例代码： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击表格中每行的按钮</title> </head> <body> <table> <tr> <th>ID</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <% for (int i = 0; i < userList.size(); i++) { %> <tr> <td><%= userList.get(i).getId() %></td> <td><%= userList.get(i).getName() %></td> <td><%= userList.get(i).getGender() %></td> <td><button id="btn<%= userList.get(i).getId() %>" onclick="changeText(this)">点击</button></td> </tr> <% } %> </table> <script> function changeText(btn) { if (btn.innerHTML === "点击") { btn.innerHTML = "未点击"; } else { btn.innerHTML = "点击"; } } </script> </body> </html> ``` 注意，上面的代码使用了 JSP 的脚本语法，`userList` 是一个包含用户信息的 List 对象。在表格的每一行中，我们为按钮设置了一个唯一的 ID，格式为 `btn${user.id}`，其中 `${user.id}` 表示当前用户的 ID。当用户点击按钮时，`changeText()` 函数会被调用，根据按钮当前的文本来动态修改文本。 接下来，你需要在 Servlet 中处理用户的点击事件。当用户点击按钮时，你可以通过 AJAX 技术将按钮的 ID 发送到 Servlet，然后在 Servlet 中将对应的按钮文本修改为“已点击”，并返回修改后的数据给前端页面。以下是示例代码： ```java @WebServlet("/changeButton") public class ChangeButtonServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id = request.getParameter("id"); // 根据 ID 修改按钮文本 // ... // 返回修改后的数据给前端页面 response.setContentType("text/plain;charset=UTF-8"); PrintWriter out = response.getWriter(); out.write("已点击"); out.close(); } } ``` 在上面的示例代码中，我们为 Servlet 创建了一个名为 `changeButton` 的 URL 映射，当用户点击按钮时，前端页面会通过 AJAX 请求将按钮的 ID 发送到该 URL。在 Servlet 中，我们通过 `request.getParameter("id")` 方法获取按钮的 ID，并根据该 ID 修改按钮文本。最后，我们将修改后的数据返回给前端页面。注意，在返回数据之前，我们需要设置响应类型为 `text/plain;charset=UTF-8`。 最后，你需要在前端页面中使用 JavaScript 和 AJAX 技术来处理用户的点击事件，并将修改后的数据更新到页面上。以下是示例代码： ```jsp <script> function changeText(btn) { var id = btn.id.substring(3); // 获取按钮的 ID var xhr = new XMLHttpRequest(); xhr.open("POST", "changeButton", true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { btn.innerHTML = xhr.responseText; } }; xhr.send("id=" + id); } </script> ``` 在上面的示例代码中，我们定义了一个 `changeText()` 函数，该函数会在用户点击按钮时被调用。首先，我们获取按钮的 ID，然后创建一个 AJAX 请求，将按钮的 ID 发送到 Servlet，等待响应数据返回。当数据返回时，我们将修改后的数据更新到按钮的文本中。注意，在发送 AJAX 请求时，我们需要设置请求类型为 `POST`，并将数据以 `application/x-www-form-urlencoded` 的形式发送过去。在响应数据返回后，我们通过 `xhr.responseText` 获取响应文本，并将其更新到按钮的文本中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值