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

最新推荐文章于 2023-05-19 10:37:42 发布

xyphf_和派孔明

最新推荐文章于 2023-05-19 10:37:42 发布

阅读量1k

点赞数

分类专栏： DOM&BOM操作

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/78648670

版权

DOM&BOM操作专栏收录该内容

64 篇文章

订阅专栏

<!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>