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

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

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

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

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

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



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>

 


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

你可能感兴趣的:(表格)