jquery实现可编辑的表格

最新推荐文章于 2024-06-10 09:52:35 发布

tuiyidelongdidi

最新推荐文章于 2024-06-10 09:52:35 发布

阅读量102

点赞数

分类专栏： Jquery 文章标签：开发工具 javascript ViewUI

本文链接：https://blog.csdn.net/tuiyidelongdidi/article/details/84358182

版权

Jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.jqueryEditTable.html

<!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="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/edittable.js"></script>
    <link type="text/css" rel="stylesheet" href="css/edittable.css">
</head>
<body>
      <table >
          <tr>
              <td>123</td>
              <td>456</td>
          </tr>
      </table>
</body>
</html>

2.edittable.js

/**
 * Created with IntelliJ IDEA.
 * User: Administrator
 * Date: 12-11-19
 * Time: 上午10:23
 * To change this template use File | Settings | File Templates.
 */
/*dom文档加载就执行的函数*/
$(document).ready(function(){
    /*0.得到td节点*/
    var tdsNode=$("td");
    tdsNode.click(tableclick);

});
/*处理表格的点击事件*/
function tableclick(){
    /*1.当前的td节点*/
    var tdNow=$(this);
    /*2.获取td节点的text文本*/
    var tdtext=tdNow.text();
    /*3.清除td节点的内容*/
    tdNow.html("");//第二种方法:tdNode.empty();
    /*4.创建一个input输入框*/
    var inputNOde=$("<input>");
    /*5.给input节点加入属性*/
    inputNOde.attr("value",tdtext);


    /*5.5给input文本框添加键盘时间*/
    inputNOde.keyup(function(event){
        /*得到当前键盘事件，火狐和id的事件有不同*/
        inputEvn=event||window.event;
        /*得到keycode*/
        var  keycode=inputEvn.keyCode;
        if(keycode==13){
            /*当前input节点*/
            var inNow=$(this);
            /*input节点的文本值*/
            var inputtext= inNow.val();
           /* //3.清空td里面的内容
            var tdNode = inputNOde.parent();*/
            /*将input的值填充到td标签中*/
            tdNow.html(inputtext);
            /*继续给td标签添加事件*/
            tdNow.click(tableclick);
        }
    });


    //5.6让文本框里面的文字被高亮选中
    //需要将jquery的对象转换成dom对象，get是取得第几个元素，并转换成dom对象
    var inputdom = inputNOde.get(0);
    inputdom.select();
    /*6.将文本框加入td节点*/
    tdNow.append(inputNOde);
    /*7.清除td的点击事件*/
    tdNow.unbind("click");
}

3.edittable.css

table ,td{
    border-collapse: collapse;
    border: 2px solid #0099FF;
}

tuiyidelongdidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现可编辑的表格

1.jqueryEditTable.html&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;可编辑表格&lt;
复制链接

扫一扫

专栏目录