JQuery实现可编辑表格

最新推荐文章于 2021-06-16 22:37:28 发布

iteye_18518

最新推荐文章于 2021-06-16 22:37:28 发布

阅读量103

点赞数

文章标签： jQuery CSS JavaScript HTML 浏览器 ViewUI

本文链接：https://blog.csdn.net/iteye_18518/article/details/81752746

版权

//在页面装载的时候，让所有的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;
}

iteye_18518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫