jsp页面table表格超方便的（仿.net）编辑操作（js控制)

共2个文件

htm：1个

bak：1个

4星 · 超过85%的资源需积分: 50 8 浏览量 2007-08-17 09:53:52 上传评论收藏 3KB RAR 举报

在JavaServer Pages (JSP) 开发中，创建动态网页时，我们经常需要处理数据展示，特别是使用表格（table）来展示结构化的信息。标题提到的"jsp页面table表格超方便的（仿.net）编辑操作（js控制）"是关于如何在JSP页面中实现一个功能强大的表格，允许用户对表格内容进行编辑。这个主题主要涵盖了两个关键技术：JSP与JavaScript。 JSP（JavaServer Pages）是Java平台上的一个服务器端技术，用于生成动态网页。它允许开发者在HTML代码中嵌入Java代码片段，或者使用JSP标签库，如JSTL（JavaServer Pages Standard Tag Library）来简化开发。在这个场景中，JSP可能被用来从数据库或其他数据源获取信息，并将其组织成表格的形式显示在页面上。接下来，JavaScript是一种常用的客户端脚本语言，它在用户的浏览器上运行，提供了丰富的交互性。在JSP页面中，JavaScript可以用于增强用户体验，例如通过事件监听器响应用户的点击或键盘输入。对于表格的编辑功能，JavaScript可以做到以下几点： 1. **切换编辑模式**：当用户点击表格中的某一行或单元格时，JavaScript可以改变该行或单元格的样式，使其进入编辑模式。通常，这会将文本内容转换为可编辑的输入字段。 2. **实时验证**：在用户编辑表格时，JavaScript可以实时检查输入的有效性，比如检查数据格式或长度限制，提供即时反馈。 3. **数据提交**：用户完成编辑后，JavaScript可以负责收集修改的数据，并向服务器发送AJAX请求。这样，更新可以无需刷新整个页面就能完成，提升用户体验。 4. **错误处理**：如果服务器返回错误，JavaScript可以捕获并显示这些错误，指导用户进行修正。 5. **回退功能**：为了防止意外的更改，JavaScript还可以实现撤销/重做功能，让用户能够在编辑过程中恢复到之前的状态。至于"仿.net"，可能是指该实现采用了类似.NET框架中的一些交互设计或组件功能，比如ASP.NET的GridView控件，提供了类似的表格编辑功能。不过，由于JSP是Java生态系统的一部分，它的实现方式和.NET框架可能会有所不同。在提供的压缩包文件"jsp页面table表格超方便的编辑操作（js控制）"中，很可能包含了示例代码、HTML模板、CSS样式和JavaScript脚本，用于展示如何在JSP页面中实现这样一个功能齐全的可编辑表格。学习和理解这些代码可以帮助开发者掌握如何在实际项目中实现类似的交互功能，提高用户界面的友好性和功能性。

资源推荐

资源详情

资源评论

收起资源包目录

jsp页面table表格超方便的编辑操作（js控制）.rar （2个子文件）

jsp页面table表格超方便的编辑操作（js控制）

Untitled1.htm 7KB

Untitled1.htm.bak 7KB

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js控制table</title> <script language="javascript"> //visibility与display属性的区别： // var falg = "0"; //操作状态标志位：（1：修改中；0：未修改） var tid0 =""; //保存新添加的行的id var tid; function view() { // document.getElementById("v1").style.visibility="hidden"; } function cancel(id) { if(falg=="1") { falg="0"; document.getElementById("tx").deleteRow(id); //先删除之前添加的行 document.getElementById(id).style.display="block"; //将所选定的行的显示属性设置成显示 } } function addrow(id) { //if(falg=="0") //{ var tid =id; if(tid0!="")//如果是正在修改中，则先将该行注销，然后在新的位置添加新行 { cancel(tid0) } var cname = "cname"+tid; var csex = "csex"+tid; var cid = "cid"+tid; var ctel = "ctel"+tid; var caddress = "caddress"+tid; var cemail= "cemail"+tid; var clove = "clove" +tid; // document.getElementById("tx").deleteRow(2); document.getElementById(tid).style.display="none"; //将所选定的行的显示属性设置成隐藏 document.getElementById("tx").insertRow(tid); //添加新行 document.getElementById("tx").rows(tid).insertCell(0); //添加相应的新列 document.getElementById("tx").rows(tid).insertCell(0).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(cname).value +'" name="'+cname+'"></td>'; document.getElementById("tx").rows(tid).insertCell(1); document.getElementById("tx").rows(tid).insertCell(1).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(csex).value +'" name="'+csex+'"></td>'; document.getElementById("tx").rows(tid).insertCell(2); document.getElementById("tx").rows(tid).insertCell(2).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(cid).value +'" name="'+cid+'"></td>'; document.getElementById("tx").rows(tid).insertCell(3); document.getElementById("tx").rows(tid).insertCell(3).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(ctel).value +'" name="'+ctel+'"></td>'; document.getElementById("tx").rows(tid).insertCell(4); document.getElementById("tx").rows(tid).insertCell(4).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(caddress).value +'" name="'+caddress+'"></td>'; document.getElementById("tx").rows(tid).insertCell(5); document.getElementById("tx").rows(tid).insertCell(5).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(cemail).value +'" name="'+cemail+'"></td>'; document.getElementById("tx").rows(tid).insertCell(6); document.getElementById("tx").rows(tid).insertCell(6).innerHTML='<td><input type=text size="8" value="'+ document.getElementById(clove).value +'" name="'+clove+'"></td>'; document.getElementById("tx").rows(tid).insertCell(7); document.getElementById("tx").rows(tid).insertCell(7).innerHTML='<td><div align="center"><a href="javascript:addrow('+tid+')">修改</a></div><div align="center"><a href="javascript:cancel('+tid+')">取消</a></div></td>'; tid0 =id; //保存新添加的行的id falg="1"; //将状态标志设置为修改中 //} } </script> </head> <body onload="view()"> <form name="form1" method="post" action=""> <div><h1>点击修改测试编辑状态，取消则是取消编辑状态</h1></div> <table width="100%" height="103" border="1" cellpadding="0" cellspacing="0" id="tx"> <tr> <td height="34"><div align="center">客户姓名</div></td> <td ><div align="center">性别</div></td> <td ><div align="center">身份证号</div></td> <td ><div align="center">电话</div></td> <td ><div align="center">地址</div></td> <td ><div align="center">Email</div></td> <td ><div align="center">爱好</div></td> <td ><div align="center">操作</div></td> </tr> <tr id="1"> <td ><div align="center"><label id="cname1" value="aa">aa</label></div></td> <td ><div align="center"><label id="csex1" value="bb">bb</label></div></td> <td ><div align="center"><label id="cid1" value="cc">cc</label></div></td> <td ><div align="center"><label id="ctel1" value="dd">dd</label></div></td> <td ><div align="center"><label id="caddress1" value="ee">ee</label></div></td> <td ><div align="center"><label id="cemail1" value="ff">ff</label></div></td> <td ><div align="center"><label id="clove1" value="gg">gg</label></div></td> <td ><div align="center"><a href="javascript:addrow(1)">修改</a></div><div align="center"><a href="javascript:cancel(1)">删除</a></div></td> </tr> <tr id="2"> <td ><div align="center"><label id="cname2" value="a1">a1</label></div></td> <td ><div align="center"><label id="csex2" value="b1">b1</label></div></td> <td ><div align="center"><label id="cid2" value="c1">c1</label></div></td> <td ><div align="center"><label id="ctel2" value="d1">d1</label></div></td> <td ><div align="center"><label id="caddress2" value="e1">e1</label></div></td> <td ><div align="center"><label id="cemail2" value="f1">f1</label></div></td> <td ><div align="center"><label id="clove2" value="g1">g1</label></div></td> <td ><div align="center"><a href="javascript:addrow(2)">修改</a></div><div align="center"><a href="javascript:cancel(2)">删除</a></div></td> </tr> <tr id="3"> <td ><div align="center"><label id="cname3" value="a2">a2</label></div></td> <td ><div align="center"><label id="csex3" value="b2">b2</label></div></td> <td ><div align="center"><label id="cid3" value="c2">c2</label></div></td> <td ><div align="center"><label id="ctel3" value="d2">d2</label></div></td> <td ><div align="center"><label id="caddress3" value="e2">e2</label></div></td> <td ><div align="center"><label id="cemail3" value="f2">f2</label></div></td> <td ><div align="center"><label id="clove3" value="g2">g2</label></div></td> <td ><div align="center"><a href="javascript:addrow(3)">修改</a></div><div align="center"><a href="javascript:cancel(3)">删除</a></div></td> </tr> <tr id="4"> <td ><div align="center"><label id="cname4" value="a3">a3</label></div></td> <td ><div align="center"><label id="csex4" value="b3">b3</label></div></td> <td ><div align="center"><label id="cid4" value="c3">c3</label></div></td> <td ><div align="center"><label id="ctel4" value="d3">d3</label></div></td> <td ><div align="center"><label id="caddress4" value="e3">e3</label></div></td> <td ><div align="center"><label id="cemail4" value="f3">f3</label></div></td> <td ><div align="center"><label id="clove4" value="g3">g3</label></div></td> <td ><div align="center"><a href="javascript:addrow(4)">修改</a></div><div align="center"><a href="javascript:cancel(4)">删除</a></div></td> </tr> </table> <h4>java爱好者--曾国聪原创</h4> </form> </body> </html>

评论收藏

内容反馈