jQuery制作可以编辑的表格

  1. 云栖社区>
  2. 博客列表>
  3. 正文

jQuery制作可以编辑的表格

it徐胖子 2012-05-02 20:39:00 浏览452 评论0

摘要: 看了王兴魁老师的视频,模仿做了一个,有感悟,先看代码:   editTable.css table {  border: 1px solid black;  /*修正单元格之间的边框不能合并*/  border-collapse: collapse;  width: 400px; } table...


看了王兴魁老师的视频,模仿做了一个,有感悟,先看代码:

 

editTable.css

table {
 border: 1px solid black;
 /*修正单元格之间的边框不能合并*/
 border-collapse: collapse;
 width: 400px;
}
table td {
 border: 1px solid black;
 width: 50%;
}
table th {
 border: 1px solid black;
 width: 50%;
}
tbody th {
 background-color: #A3BAE9; 
}

 

editTable.js

$(function () {
    // 控制奇偶行的颜色
    $("tbody tr:even").css("background-color", "yellow");
   
    // 找到单元格
    var tds = $("tbody td");
   
    // 注册事件
    tds.click(function () {
        // 当前td对象
        var tdObj = $(this);
        // 如果已经是文本框了
        if (tdObj.children("input").length > 0) {
            return false;
        }
        // 当前td中的内容
        var text = tdObj.html();
        // 清空td
        tdObj.html("");
        // 插入一个文本框,并选中里面内容
        var inputObj = $("<input type='text' />").css("border-width", "0")
                             .css("font-size", "16px").width(tdObj.width())
                             .css("background-color", tdObj.css("background-color"))
                             .val(text).appendTo(tdObj).select();

        //处理文本框上回车和esc按键的操作
        inputObj.keyup(function (event) {
            var keycode = event.which;
            //处理回车的情况
            if (keycode == 13) {
                //获取当当前文本框中的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                tdObj.html(inputtext);
            }
            //处理esc的情况
            if (keycode == 27) {
                //将td中的内容还原成text
                tdObj.html(text);
            }
        });
    });

});


editTable.htm

<html>
 <head>
  <title>可以编辑的表格</title>
  <link type="text/css" rel="stylesheet" href="css/editTable.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/editTable.js"></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>
   </tbody>
   </table>
 </body>
</html>


得到的启示:

1.我们最好把需要经常用到的jQuery对象用一个变量保存起来,方便后面继续用。比如像var tds = $("tbody td")。
2.jQuery强大的链式操作。
3.利用<thead>和<tbody>可以将表头和表体区分一下。这样方便,比如我想操作表体的td而不是表头的td,var tds = $("tbody td")。
4.th可以在thead的tr中出现也可以在tbody的tr中出现。

 

 

 

【云栖快讯】阿里云栖开发者沙龙(Java技术专场)火热来袭!快来报名参与吧!  详情请点击

网友评论