点击元素变输入框,更改值后回车变成新值

来源：互联网发布：网络票务编辑：程序博客网时间：2024/06/05 17:05
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>点击元素变输入框</title>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">        $(function(){                $.each($("tbody tr"),function(){                    //获取tr中的子元素 获取第三列                    var td = $(this).children("td:eq(2)");                    td.css("color","red");                    td.click(tdClick);                });        });        function tdClick(){            /*  第一步：获取点击对象 获取文本 清空对象中的内容 */            //获取当前对象            var td = $(this);            //获取当前点击对象的文本            var tdText = td.text();            //清空点击对象td中的内容            td.empty();            /* 第二步：创建一个文本框的元素 */            //创建一个文本框元素            var ipt = $("<input>");            //将获取到的对象文本设置为输入框的value            ipt.val(tdText);            //设置文本框的宽高等于输入框的宽高            ipt.width(td.width());            ipt.height(td.height());            //将创建的文本框添加到td中            td.append(ipt);            //触发选择事件,输入框的文本自动被选中            ipt.trigger("select");            //当键盘按下时            /* 当按下回车键时更改并提交数据 */            ipt.keydown(function(e){                //当按下回车后 回车键键值等于13                if(e.keyCode==13){                    td.text(ipt.val());                    //通过ajax将数据提交给后端                    //绑定点击事件                    td.click(tdClick);                }            });            //当文本框出现,解绑点击事件            td.unbind(tdClick);        }    </script><style type="text/css">    h1{text-align: center;}    table{margin: 0 auto;width: 603px;height: 300px;}    table,th,td{border: 1px solid #000000;border-collapse: collapse;}    td{width: 200px;text-align: center;}    thead tr{background-color:#434343;color: #ffffff;}    tbody tr:nth-of-type(odd){ background:#767676;}    tbody tr:nth-of-type(even){ background:#e2e2e2;} </style></head><body><h1>需要说明:点击元素变输入框,更改值后回车变成新值</h1><table>    <thead>        <tr><th>账号</th><th>姓名</th><th>余额(点击该列可编辑)</th></tr>    </thead>    <tbody>        <tr><td>1001</td><td>张三</td><td>20000</td></tr>        <tr><td>1002</td><td>李四</td><td>30000</td></tr>        <tr><td>1003</td><td>王五</td><td>40000</td></tr>        <tr><td>1004</td><td>赵六</td><td>50000</td></tr>        <tr><td>1005</td><td>孙七</td><td>60000</td></tr>        <tr><td>1006</td><td>周八</td><td>70000</td></tr>        <tr><td>1007</td><td>鲁九</td><td>80000</td></tr>        <tr><td>1008</td><td>郑十</td><td>90000</td></tr>    </tbody></table></body></html>
阅读全文
0 0