jquery可编辑的表格

最新推荐文章于 2021-08-21 08:36:52 发布

lk231_java

最新推荐文章于 2021-08-21 08:36:52 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jQuery HTML ViewUI

本文链接：https://blog.youkuaiyun.com/lk231_java/article/details/83888654

jquery 专栏收录该内容

3 篇文章

订阅专栏

以下是一个简单的用jquery实现可编辑的表格


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>可编辑的表格</title>
  <script type="text/javascript" src="jslib/jquery.js"></script>
  <script type="text/javascript" src="jslib/edit.js"></script>

</head>
<body>
    <table border="1px">
        <tbody>
            <tr>
                <td>123</td>
                <td>456</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

其js代码为


$(document).ready(function(){
    var tds = $("td");
    tds.click(tdclick);
});

function tdclick(){        
        var td = $(this);       //获得被点击的td所返回的jquery对象
        var tdvalue = td.text();    //获得td的文本
        td.html("");                //然后将td置空
        var input = $("<input>");   //添加一个input标签
        input.attr("value", tdvalue);       //设置其属性value的值
        input.keyup(function(event){        //为其注册键盘监听事件
            var myevent = event || window.event;
            var keycode = myevent.keyCode;
            if(keycode == 13){
                var inputNode = $(this);
                var inputvalue = inputNode.val();
                var tdNode = inputNode.parent();      //得到其父节点
                tdNode.html(inputvalue);
                tdNode.click(tdclick);                //注册鼠标点击事件
            }
        });
        td.append(input);
        var inputdom = input.get(0);
        inputdom.select();                            //让文本框里的文字选中
        td.unbind("click");
}