jQuery制作可以编辑的表格

来源：互联网发布：说唱app软件编辑：程序博客网时间：2024/05/21 17:01

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中出现。

0 0