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