DOM实现可编辑表格 <html> <head> <title></title> </head> <body> <table id="editTable" border="1"> <tr> <td>aaaaaaa</td> <td>bbbbbbb</td> <td>ccccccc</td> </tr> <tr> <td>ddddddd</td> <td>eeeeeee</td> <td>fffffff</td> </tr> <tr> <td>gggggggg</td> <td>hhhhhhhh</td> <td>iiiiiiii</td> </tr> </table> </body> </html> <script type="text/javascript"> //dom创建文本框 var input = document.createElement("input"); input.type="text" ; //得到当前的单元格 var currentCell ; function editCell(event) { if(event==null) { currentCell=window.event.srcElement; } else { currentCell=event.target; } //用单元格的值来填充文本框的值 input.value=currentCell.innerHTML; //当文本框丢失焦点时调用last input.οnblur=last; currentCell.innerHTML=""; //把文本框加到当前单元格上. currentCell.appendChild(input); input.focus(); } function last() { //充文本框的值给当前单元格 currentCell.innerHTML = input.value; } //最后为表格绑定处理方法. document.getElementById("editTable").οndblclick=editCell; </script> jQuery实现可编辑表格 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% 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>test for jQuery</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"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <mce:script type="text/javascript" src="jquery-1.6.min.js" mce_src="jquery-1.6.min.js"></mce:script> <mce:style type="text/css"><!-- th { background: #0066FF; color: #FFFFFF; line-height: 20px; height: 30px; } td { padding: 6px 11px; border-bottom: 1px solid #95bce2; vertical-align: top; text-align: center; } td * { padding: 6px 11px; } tr.alt td{ background: #ecf6fc; } tr.over td{ background: #bcd4ec; } --></mce:style><style type="text/css" mce_bogus="1">th { background: #0066FF; color: #FFFFFF; line-height: 20px; height: 30px; } td { padding: 6px 11px; border-bottom: 1px solid #95bce2; vertical-align: top; text-align: center; } td * { padding: 6px 11px; } tr.alt td{ background: #ecf6fc; } tr.over td{ background: #bcd4ec; }</style> <mce:script type="text/javascript"><!-- var this_ago; var name; $(document).ready(function(){ $(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}) $(".stripe tr:even").addClass("alt"); //加事件(双击替换文本) //:td:first-child $(".stripe tr td").dblclick(function() { if(this_ago!=null){ if(this_ago!=this){ huanyuan(this_ago); }else{ //点击同一个先判断当前值和开始值是否相等;不能的话可以修改 if(name==""||name==null){ return; }else{ if(inname!=""&&inname!=null){ if(inname!=name){ }else{ return; } }else{ //返回 return; } } } } if($(this).text()!=""&&$(this).text()!=null){ var name2=$(this).text();//替换文本框 if(name2!=""&&name2!=null){ this_ago=this; name=name2; $(this).empty(); $(this).append("<input name='name' οnchange=getNa(this) value='"+name+"' size='8'>"); } } }); }) //onchange文本框onchange时调用该方法 var inname;//文本框的值 function getNa(para){ inname=para.value; var tdv=document.createTextNode(inname); para.replaceNode(tdv); } //还原 var iname1; function huanyuan(obj){ if(inname!=""&&inname!=null){ if(inname!=name){ $(obj).empty(); //判断是否改变 if(iname1!=inname){ $(obj).append(inname); }else{ //相等的话说明没改变就要用当前的name来默认 $(obj).append(name); } iname1=inname; }else{ $(obj).empty(); $(obj).append(name); } }else{ $(obj).empty(); $(obj).append(name); } } // --></mce:script> </head> <body> <table class="stripe" width="200" border="0" cellpadding="1" cellspacing="1"> <tr> <th width="50">序号</th><th width="150">名字</th> </tr> <tr> <td>1</td><td>AAA</td> </tr> <tr> <td>2</td><td>BBB</td> </tr> <tr> <td>3</td><td>CCC</td> </tr> <tr> <td>4</td><td>DDD</td> </tr> <tr> <td>5</td><td>EEE</td> </tr> </table> </body> </html>