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

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


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


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



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>

 


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

posted @ 2013-05-08 20:38  javawebsoa  Views(415)  Comments(0)    收藏  举报