主要实现原理:
每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组。然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容
效果图:点击之前
点击之后
代码:
1 <html> 2 <head> 3 <title>asd</title> 4 <meta charset=utf-8> 5 <script type="text/javascript"> 6 //点击之后页面变成可提交状态 7 function xiugai(a){ 8 var trobj = a.parentNode.parentNode; 9 var tdobj = trobj.getElementsByTagName("td"); 10 for(var i =0;i<tdobj.length-1;i++){ 11 tdobj[i].innerHTML ="<input onblur=‘submit()‘ type=\"input\" value=‘" +tdobj[i].innerText+ " ‘/>"; 12 } 13 } 14 32 </script> 33 </head> 34 <body> 35 <table> 36 <tr> 37 <td>123</td> 38 <td>123</td> 39 <td>123</td> 40 <td><input type="button" onclick="xiugai(this)" value="修改"/></td> 41 </tr> 42 </table> 43 </body> 44 </html>
这里应该还要当鼠标移开之后也就是失去焦点事件就触动函数,用ajax把数据提交到数据中去,并且输入框变回到原来的形式