js 实现可编辑表格

来源：互联网发布：算量软件哪个好编辑：程序博客网时间：2024/05/16 18:47

<!-- 解决思路，当表格当前的td被双击时，得到当前的值，然后清空，再定制一个input，

将input渲染到td内，当该td失去焦点时，移除input，将input的值赋给td -->

<html><head><title>test</title><style>table td{border:1px solid red;width:100px;text-align:center;padding:3px 5px}</style><script type="text/javascript">function editContent(node){if(!node.onEdit || node.onEdit != 'true') {var initValue = node.innerHTML;var input = document.createElement('input');input.type='text';input.value = initValue;input.style.width = node.clientWidth - 10;input.style.height = node.clientHeight - 6;node.innerHTML = '';node.appendChild(input);addEvent(input,callBackFunc);node.onEdit = 'true';input.select();input.focus();}}function callBackFunc() {var parentNd = this.parentNode;parentNd.innerHTML = this.value;parentNd.onEdit = 'false';}function addEvent(obj,callBack) {if (obj.addEventListener) {obj.addEventListener('blur',callBack,false);} else if (obj.attachEvent) {obj.onblur = callBack;} else {alert('无法识别浏览器');}}</script></head><body><div><table style="border:1px solid red;border-spacing:0;border-collapse:collapse"><thead><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr></thead><tbody id="tbody11"><tr><td ondblclick="editContent(this)">11</td><td ondblclick="editContent(this)">21</td><td ondblclick="editContent(this)">31</td><td>41</td><td>51</td><td>61</td></tr><tr><td>12</td><td>22</td><td>32</td><td>42</td><td>52</td><td>62</td></tr><tbody></table></div></body></html>

备注：js中有两个函数，名字相同参数不同，当调用的时候怎么区分？

答案：js不像java有方法重载，js的方法顺序加载，后面的会把前面的方法覆盖，永远只有后面的那个方法会被执行。另外，js不区分参数个数的，调用时参数少了按顺序匹配，多了多余的无用。