单击单元格实现可编辑的表格(学号和姓名下)

最新推荐文章于 2021-06-03 04:18:09 发布

小龙卷卷风

最新推荐文章于 2021-06-03 04:18:09 发布

阅读量2.4k

点赞数

分类专栏： jQuery 文章标签： border function table xhtml input 浏览器

本文链接：https://blog.csdn.net/deron7/article/details/7054722

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

单击单元格实现可编辑的表格(学号和姓名下)

编辑完成后按Enter确定,Esc取消

<!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>
    <title>JQuery下单击行实现可编辑的表格</title>
    <style type="text/css">
    table
    {
       border:1px solid black;
       border-collapse:collapse;
       width:300px;
        }
    table th
    {
       border:1px solid black;
       width:50px;
        } 
    table td
    {
       border:1px solid black;
       width:50px;
        }
     tbody th
     {
        background-color:Highlight; 
         }      
    </style>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('tbody tr:even').css("background-color", "silver"); //设置奇数行背景为灰色
            //给单元格注册鼠标单击事件
            $('tbody td').click(function () {
                var tdobj = $(this); //获得单击的单元格
                //移除文本框的相应点击事件,因为会给td照成影响
                if (tdobj.children('input').length > 0) {
                    return false;
                }
                var tdtext = $(this).html(); // 获得该单元格的内容
                tdobj.html(""); //清空该单元格

                var inputobj = $("<input type='text' />").css("border-width", "0px")//创建一个无边框文本框
                .css("font-size", "15px")//设置文本框的背景字体大小
                .width("50px")//设置文本框的大小
                .css("background-color", tdobj.css("background-color"))//设置文本框的背景色为当前选中td的背景色
                .val(tdtext)//设置文本框为该单元格的内容
                .appendTo(tdobj); //将文本框追加到td中

                inputobj.trigger("focus").trigger("select"); //先触发聚焦再触发选中(考虑到浏览器兼容性)
                //给文本框注册Enter和ESC按键的操作
                inputobj.keyup(function (event) {
                    var keynode = event.which; //获得当前按下键盘的键值
                    //当选择Enter的情况
                    if (keynode == "13") {
                        tdobj.html($(this).val());//保存编辑内容
                    }
                    //当选择ESC的情况
                    if (keynode == "27") {
                        tdobj.html(tdtext);//取消时设置为鼠标点击时的值
                    }
                });
            });
        });
    </script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击表格就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>000001</td>
<td>葛键</td>
</tr>
<tr>
<td>000002</td>
<td>张洁</td>
</tr>
<tr>
<td>000003</td>
<td>迎春</td>
</tr>
<tr>
<td>000004</td>
<td>振威</td>
</tr>
</tbody>
</table>
</body>
</html>

小龙卷卷风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
单击单元格实现可编辑的表格(学号和姓名下)

单击单元格实现可编辑的表格(学号和姓名下) 编辑完成后按Enter确定,Esc取消 JQuery下单击行实现可编辑的表格 table { border:1px solid black; border-collapse:collapse; width:300px; }
复制链接

扫一扫