WEB开发网
开发学院网页设计心得技巧 实现网页表格数据的及时编辑 阅读

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

 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>

Tags:实现 网页 表格

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接