zoukankan      html  css  js  c++  java
  • 实现网页表格数据的及时编辑

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


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


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



    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>


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

  • 相关阅读:
    案例十:shell编写nginx服务启动程序
    Linux在实际中的应用
    案例九:shell脚本自动创建多个新用户,并设置密码
    数据架构的演变
    第一个Struts2程序
    关于eclipse导入Tomact报404的问题
    单选框 RadioButton
    EditText编辑框
    Button控件的三种点击事件
    1319: 同构词
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3067745.html
Copyright © 2011-2022 走看看