jQuery小试之可编辑表格

在此重新做一个可以编辑的表格：单击即可编辑，离开即保存单元格内容，回车键可以保存，Esc可以退出保存。

       前台界面：

       

       HTML代码：

 

[html] view plaincopyprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.         <meta http-equiv="Content-Type" content ="text/html;charset=UTF-8" />  
  4.         <link type="text/css" rel="Stylesheet"  href="css/editTable.css" />  
  5.         <script type="text/javascript" src="js/jquery.js"></script>  
  6.         <script type="text/javascript" src="js/editTable.js"></script>  
  7.         <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.     <table >  
  13.         <thead>  
  14.                 <tr>  
  15.                         <td colspan ="2">  
  16.                         点击即可编辑内容  
  17.                         </td>  
  18.                 </tr>  
  19.         </thead>  
  20.         <tbody>  
  21.                 <tr>  
  22.                         <th> 姓名</th>  
  23.                         <th>学号</th>  
  24.                 </tr>  
  25.                 <tr>  
  26.                         <td>090501</td>  
  27.                          <td>lida</td>  
  28.                 </tr>  
  29.                 <tr>  
  30.                         <td>090502</td>  
  31.                          <td>yangzhe</td>  
  32.                 </tr>  
  33.                 <tr>  
  34.                         <td>090503</td>  
  35.                          <td>hanhao</td>  
  36.                 </tr>  
  37.                 <tr>  
  38.                         <td>090504</td>  
  39.                          <td>hefei</td>  
  40.                 </tr>  
  41.                 <tr>  
  42.                          <td colspan ="2">汇总</td>  
  43.                 </tr>  
  44.         </tbody>  
  45.     </table>  
  46.     </div>  
  47.     </form>  
  48. </body>  
  49. </html>  

        CSS：

[html] view plaincopyprint?
  1. body {  
  2. }  
  3. table,table td,table th  
  4. {  
  5.         /*单元格宽度为1、直线、黑色*/  
  6.         border:1px solid black;  
  7.         /*单元格边框合并*/  
  8.         border-collapse :collapse;  
  9.         width :300px;  
  10.         text-align:center ;  
  11.         }  
  12. table th  
  13. {  
  14.         /*表头颜色*/  
  15.         background-color:#a3bae9;  
  16.         }  

        javascript代码：

[javascript] view plaincopyprint?
  1. //简化的ready写法  
  2. $(function () {  
  3.         //找到表格的内容区域中所有的奇数行，并设置样式  
  4.         $("tbody tr:even").css("background-color", "#ECE9D8");  
  5.         //我们需要找到所有的学号单元格  
  6.         var numTd = $("tbody td:even");  
  7.         //鼠标点击的事件  
  8.         numTd.click(function () {  
  9.                 //找到当前鼠标点击的td  
  10.                 var tdObj = $(this);  
  11.                 //解决firefox中出现html代码问题  
  12.                 if (tdObj.children("input").length > 0) {  
  13.                         //当前td中input，不执行click处理  
  14.                         return false;  
  15.                     }  
  16.                 //获取原内容  
  17.                 var text = tdObj.html();  
  18.                 //清空td中的内容  
  19.                 tdObj.html("");  
  20.                 //创建一个文本框，去掉文本框的边框，设置样式  
  21.                 //需要将当前td中的内容放到文本框中  
  22.                 //将文本框插入到td中  
  23.                 var inputObj = $("<input type='text'>").css("border-width", "0")  
  24.             .css("font-size", "16px").width(tdObj.width())  
  25.             .css("background-color", tdObj.css("background-color"))  
  26.             .val(text).appendTo(tdObj);  
  27.                 //是文本框插入之后就被选中  
  28.                 inputObj.trigger("focus").trigger("select");  
  29.                 inputObj.click(function () {  
  30.                         return false;  
  31.                 });  
  32.                 //处理回车和ESC的操作  
  33.                 inputObj.keyup(function (event) {  
  34.                         //获取当前按下键盘的键值  
  35.                         var keycode = event.which;  
  36.                         //处理回车的情况  
  37.                         if (keycode == 13) {  
  38.                                 //获取当当前文本框中的内容  
  39.                                 var inputtext = $(this).val();  
  40.                                 //将td的内容修改成文本框中的内容  
  41.                                 tdObj.html(inputtext);  
  42.                         }  
  43.                         //处理ESC的情况  
  44.                         if (keycode == 27) {  
  45.                                 //将td中的内容还原成原内容  
  46.                                 tdObj.html(text);  
  47.                         }  
  48.                 });  
  49.         });  
  50. });  

        运行结果：

        

        通过多次修改表格内置文本框的CSS达到点击即可修改的效果，通过event.which获取当前按键，通过简单的知识合理搭配出丰富的效果，这是本例的主要内容。如果哪里有误或是可以优化，欢迎交流。

posted @ 2014-07-27 09:10  阳光小屋  阅读(164)  评论(0)  编辑  收藏  举报