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

　2013-05-08 17:26:22　来源：开发学院　　　

核心提示： 对上图表格数据实现本页修改，即点击“编辑” 则张三、李四、赵武等信息变为文本框显示，实现网页表格数据的及时编辑，实现修改：当点击“完成”时，又将信息变为表格的不可编辑形式

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

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

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>