JQuery实现可编辑表格

最新推荐文章于 2021-07-01 21:37:22 发布

原创最新推荐文章于 2021-07-01 21:37:22 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #JavaScript #HTML #浏览器 #ViewUI

本文介绍了一个使用jQuery实现的可编辑表格案例，通过简单的JavaScript代码使表格单元格(td)变为可编辑状态，支持输入框响应回车和ESC键，实现单元格内容的修改。

//在页面装载的时候，让所有的td都拥有一个点击事件
$(document).ready(function() {
    //找到所有的td节点
    var tds = $("td");
   //给所有的td 增加点击事件
    tds.click(tdclick);
});
//td被点击的事件
function tdclick() {
    // 0 . 保存当前的td
    var td = $(this);
      //1.取出当前的td中的文本内容保存起来
    var text = td.text();
      //2.清空td里面的内容
    td.html("");

      //3. 建立一个文本框，也就是input 的元素节点
    var input = $("<input>");
        //4 . 设置文本框的值是保存起来的文本内容  并且给文本框加一样式表
    input.attr("value", text);
    input.addClass("onclicks");
        // 4.5 让文本框可以响应回车按下的事件
    input.keyup(function(event) {
        //1. 首先判断是不是回车按下
        // 2. 解决不同浏览器获取事件对象的差异
        var myEvent = event || window.event;
        var kcode = myEvent.keyCode;
         //1 保存当前文本框的内容
        var inputnode = $(this);
        var inputext = inputnode.val();
         //2 找到td对象
        var tdNode = inputnode.parent();
        if (kcode == 13) {
            //3 将保存的内容填充到td中
            tdNode.html(inputext);

        } else if (kcode == 27) {
            tdNode.html(text);
        }
            //4 将td重新获得点击事件
        tdNode.click(tdclick);
    });
        // 5. 将文本框加入到td中
    td.append(input);//也可以用input.appendto(td);
    // 5.5 让文本框里面的文字被高亮选中
    //需要将JQuery对象转换成dom对象
    var inputdom = input.get(0);
    inputdom.select();
    // 6. 需要清除 td 上的点击事件
    td.unbind("click");
}

html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>itcast.cn的JQuery实例：可编辑的表格</title>
    <script type="text/javascript" src="jslib/jquery.js"></script>
    <script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<head>
    <link type="text/css" rel="stylesheet" href="css/edit.css"/>
</head>
<body>

<table>

        <tr>
            <td>
                123123
            </td>
            <td>
                456456
            </td>
        </tr>

</table>
</body>
</html>

css 代码

table,td{
    border-collapse:collapse;/*让相邻边框合并*/
    border:1px solid black;
}
.onclicks{
border : thin dotted blue;
}