JS制作可编辑表格

浅浅的花香味﹌ 2024-02-17 15:10 35阅读 0赞

<html> 
![JS制作可编辑表格][JS]<head> 
![JS制作可编辑表格][JS]<title></title> 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]</head> 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]<body> 
![JS制作可编辑表格][JS]<table id="editTable"border="1"> 
![JS制作可编辑表格][JS]<tr> 
![JS制作可编辑表格][JS]<td>aaaaaaa</td> 
![JS制作可编辑表格][JS]<td>bbbbbbb</td> 
![JS制作可编辑表格][JS]<td>ccccccc</td> 
![JS制作可编辑表格][JS]</tr> 
![JS制作可编辑表格][JS]<tr> 
![JS制作可编辑表格][JS]<td>ddddddd</td> 
![JS制作可编辑表格][JS]<td>eeeeeee</td> 
![JS制作可编辑表格][JS]<td>fffffff</td> 
![JS制作可编辑表格][JS]</tr> 
![JS制作可编辑表格][JS]<tr> 
![JS制作可编辑表格][JS]<td>gggggggg</td> 
![JS制作可编辑表格][JS]<td>hhhhhhhh</td> 
![JS制作可编辑表格][JS]<td>iiiiiiii</td> 
![JS制作可编辑表格][JS]</tr> 
![JS制作可编辑表格][JS]</table> 
![JS制作可编辑表格][JS]</body> 
![JS制作可编辑表格][JS]</html> 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]<script> 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]//dom创建文本框 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]varinput =document.createElement\_x("input"); 
![JS制作可编辑表格][JS]input.type="text"; 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]//得到当前的单元格 
![JS制作可编辑表格][JS]varcurrentCell ; 
![JS制作可编辑表格][JS]functioneditCell(event) 
![JS制作可编辑表格][JS]\{ 
![JS制作可编辑表格][JS]if(event==null) 
![JS制作可编辑表格][JS]\{ 
![JS制作可编辑表格][JS]currentCell=window.event.srcElement; 
![JS制作可编辑表格][JS]\} 
![JS制作可编辑表格][JS]else 
![JS制作可编辑表格][JS]\{ 
![JS制作可编辑表格][JS]currentCell=event.target; 
![JS制作可编辑表格][JS]\} 
![JS制作可编辑表格][JS]//根据Dimmacro 的建议修定下面的bug 非常感谢 
![JS制作可编辑表格][JS]if(currentCell.tagName=="TD")\{ 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]//用单元格的值来填充文本框的值 
![JS制作可编辑表格][JS]input.value=currentCell.innerHTML; 
![JS制作可编辑表格][JS]//当文本框丢失焦点时调用last 
![JS制作可编辑表格][JS]input.onblur=last; 
![JS制作可编辑表格][JS]input.ondblclick=last; 
![JS制作可编辑表格][JS]currentCell.innerHTML=""; 
![JS制作可编辑表格][JS]//把文本框加到当前单元格上. 
![JS制作可编辑表格][JS]currentCell.appendChild(input); 
![JS制作可编辑表格][JS]//根据liu\_binq63 的建议修定下面的bug 非常感谢 
![JS制作可编辑表格][JS]input.focus(); 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]\} 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]\} 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]functionlast() 
![JS制作可编辑表格][JS]\{ 
![JS制作可编辑表格][JS]//充文本框的值给当前单元格 
![JS制作可编辑表格][JS]currentCell.innerHTML =input.value; 
![JS制作可编辑表格][JS]\} 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]//最后为表格绑定处理方法. 
![JS制作可编辑表格][JS]document.getElementByIdx\_x("editTable").ondblclick=editCell; 
![JS制作可编辑表格][JS] 
![JS制作可编辑表格][JS]</script>

双击表格的单元格后出现一个文本框，用户编辑完成后将用户添的值重新给这个单元格。该功能结合Ajax 可以

同一个页面上完成对数据的修改功能，非常实用。

[JS]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/532c47843acf4247877bffcff8b0c318.png