文本框即点即改

最新推荐文章于 2019-09-18 11:41:15 发布

执着更专业

最新推荐文章于 2019-09-18 11:41:15 发布

阅读量501

点赞数 1

分类专栏： html JavaScript css 文章标签： html

本文链接：https://blog.csdn.net/pangchengyong0724/article/details/51385685

版权

JavaScript 同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

直接上代码不需要修改直接粘贴即可使用

HTML代码如下


<!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>可编辑的表格</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $("tbody>tr:even").css("background-color","#ECE9D8");   //找到表格的内容区域中所有的奇数行

//            var numTd = $("tr>td:even");   //找到有学号的单元格
            var numTd = $("tr>td");   //找到有学号的单元格

            numTd.click(function(){

                var tdobj = $(this);   //找到当前鼠标点击的td

                if(tdobj.children("input").length>0){   //要是td中有子节点input
                    return false;   //返回false
                }

                var tdtext = tdobj.html();   //获取选择的td的值
                tdobj.html("");   //清空td中的内容

                var inputobj = $("<input style='width: "+tdobj.width()+"px' type='text'>");   //创建一个文本框

                inputobj.appendTo(tdobj);    //将创建的文本框追加到td中去
                //inputobj.width(tdobj.width());    //将文本框的长度设置为td的长度
                inputobj.css("border-width","0");   //将文本框的边框去掉
                inputobj.css("background-color",tdobj.css("background-color"));    //将文本框的背景颜色设置和td的一样
                inputobj.val(tdtext);    //将td中的值放到input中去
                inputobj.css("font-size","16px");    //将input中的字体设置和原来的一样

                inputobj.trigger("focus").trigger("select");   //设置文本框插入之后就被选中

                //处理文本框上回车和esc按键的操作
                inputobj.keyup(function(event){
                    var keycode = event.which;   //获取当前按下键盘的键值
                    if(keycode == 13){            //当按下回车键时
                        var inputvalue = $(this).val();    //获取当前文本框中的内容
                        tdobj.html(inputvalue);   //将td的值设置为文本框的内容
                    }
                    if(keycode == 27){           //当按下esc键时
                        tdobj.html(tdtext);    //将td中的内容还原成text
                    }
                });

            });
        });
    </script>
</head>

<body>
    <table>
        <thead>
                <tr>
                    <th colspan="2">单击学号编辑表格</th>
                </tr>
        </thead>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>地址</th>
            </tr>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>张三11111</td>
            </tr>
            <tr>
                <td>002</td>
                <td>李四</td>
                <td>李四222222</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>王五333333</td>
            </tr>
            <tr>
                <td>004</td>
                <td>赵六</td>
                <td>赵六44444</td>
            </tr>
            <tr>
                <td>005</td>
                <td>赵六</td>
                <td>赵六55555</td>
            </tr>
            <tr>
                <td>006</td>
                <td>赵六</td>
                <td>赵六66666</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

转载请注明出处谢谢

执着更专业

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本框即点即改

直接上代码不需要修改直接粘贴即可使用 HTML代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><he
复制链接

扫一扫