1、EditTable.jsp 文件
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>可编辑的表格</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <link rel="stylesheet" type="text/css" href="css/editTable.css"> <script type="text/javascript" src="scripts/jquery-1.6.1.js"></script> <script type="text/javascript"> $(document).ready(function() { //用Jquery实现隔行换色 $("#table1 tbody tr:even").css("background", "#ECF5FF"); $("#table1 tbody td:even").dblclick(function(){ var inputObj = $("<input type='text'/>"); var tdObj = $(this); //当前td中有input,不执行dblclick处理 if(tdObj.children("input").length > 0){ return false; } //获得td中的内容 var text = tdObj.html(); //将当前td中的内容放到文本框中 inputObj.val(text); //使文本框的宽度和td的宽度相同 inputObj.width(tdObj.width()); //使文本框的高度和td的高度相同 inputObj.height(tdObj.height()); //设置文本框的边框为0 inputObj.css("border-width","0px"); //设置文本框中的文字大小是16px inputObj.css("font-size","18px"); //设置文本框的背景色 inputObj.css("background-color",tdObj.css("background-color")); //清空td中的内容 tdObj.html(""); //将文本框插入到td中 tdObj.html(inputObj); //选中文本框 inputObj.get(0).select(); //双击文本框不触发td的双击事件 inputObj.dblclick(function(){ return false; }); //处理文本框上回车和esc按键的操作 inputObj.keyup(function(event){ //获得键值 var keyCode = event.which; //处理回车的情况 if(keyCode == 13){ tdObj.html($(this).val()); } //处理esc的情况 if(keyCode == 27){ tdObj.html(text); } }); }); }); </script> </head> <body> <table id="table1" border="1px" cellpadding="0px" cellspacing="0px"> <thead> <tr> <td colspan="2" align="center">鼠标点击表格项就可以编辑</td> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>000001</td> <td>张三</td> </tr> <tr> <td>000002</td> <td>李四</td> </tr> <tr> <td>000003</td> <td>王五</td> </tr> <tr> <td>000004</td> <td>赵六</td> </tr> </tbody> </table> </body> </html>
?
2、editTable.css 文件
table { border: 1px solid black; /*修正单元格之间的边框不能合并*/ border-collapse: collapse; width: 400px; } table td { border: 1px solid black; width: 50%; } table th { border: 1px solid black; width: 50%; } tbody th { background-color: #A3BAE9; }?
?
?
?
?
1 楼
zhangpurple
2011-12-08
2 楼
zhoutong123a
2012-04-23
好东西,谢谢