实现网页表格数据的及时编辑

来源：互联网发布：买了东西能寄农村淘宝编辑：程序博客网时间：2024/04/27 21:41

刚刚看到论坛的一个问题：能否做到如下操作

对上图表格数据实现本页修改，即点击“编辑” 则张三、李四、赵武等信息变为文本框显示，实现修改：

当点击“完成”时，又将信息变为表格的不可编辑形式，此时内容变为刚才修改的内容，如下图：

javascript 具体实现如下：

<html><head><meta charset="utf-8"><title></title><script>            function edit(_0){                var tds = _0.parentNode.parentNode.children;                for(var i in tds){                if(i<_0.parentNode.cellIndex){                var inp = document.createElement('input');                inp.type='text';                inp.value=tds[i].innerHTML;                tds[i].innerHTML='';                    tds[i].appendChild(inp);                    }                }            }            function quit(_0){                var tds = _0.parentNode.parentNode.children;                for(var i in tds){                if(i<_0.parentNode.cellIndex-1){                    tds[i].innerHTML=tds[i].children[0].value;                    }                }            }</script></head><body><table with><tr><td>1</td><td>2</td><td>3</td><td><a href="javascript:;" onclick="edit(this);">编辑</a></td><td><a href="javascript:;" onclick="quit(this);">完成</a></td></tr><tr><td>1</td><td>2</td><td>3</td><td><a href="javascript:;" onclick="edit(this);">编辑</a></td><td><a href="javascript:;" onclick="quit(this);">完成</a></td></tr><tr><td>1</td><td>2</td><td>3</td><td><a href="javascript:;" onclick="edit(this);">编辑</a></td><td><a href="javascript:;" onclick="quit(this);">完成</a></td></tr></table></body></html>

此代码是论坛截下来的，感觉很有用处，特记录