jQuery实战-可以编辑的表格


可以编辑的表格

EditTable.html

Html代码

  1. <html>  
  2. <head>  
  3. <title>可以编辑的表格</title>  
  4. <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>  
  5. <link type=”text/css” rel=”stylesheet” href=”css/editTable.css” />  
  6. <script type=”text/javascript” src=”js/jquery.js”></script>  
  7. <script type=”text/javascript” src=”js/editTable.js”></script>  
  8. </head>  
  9.   
  10. <body>  
  11. <table>  
  12.     <thead>  
  13.         <tr>  
  14.             <th colspan=”2”>鼠标点击表格项就可以编辑</th>  
  15.         </tr>  
  16.     </thead>  
  17.     <tbody>  
  18.         <tr>  
  19.             <th>学号</th>  
  20.             <th>姓名</th>  
  21.         </tr>  
  22.         <tr>  
  23.             <td>000001</td>  
  24.             <td>张三</td>  
  25.         </tr>  
  26.         <tr>  
  27.             <td>000002</td>  
  28.             <td>李四</td>  
  29.         </tr>  
  30.         <tr>  
  31.             <td>000003</td>  
  32.             <td>王五</td>  
  33.         </tr>  
  34.         <tr>  
  35.             <td>000004</td>  
  36.             <td>赵六</td>  
  37.         </tr>  
  38.     </tbody>  
  39. </table>  
  40. </body>  
  41. </html>  

editTable.css

  1. table {   
  2. border: 1px solid black;   
  3. border-collapse: collapse; //修正单元格之间的边框不能合并的问题   
  4. width: 400px;   
  5. }   
  6. table td {   
  7. border: 1px solid black;   
  8. width: 50%;   
  9. }   
  10. table th {   
  11. border: 1px solid black;   
  12. width: 50%;   
  13. }   
  14. tbody th {   
  15.     background-color: #A3BAE9;   
  16. }  

editTable.js

  1. //需要首先通过javascript来解决内容部分奇偶行的背景色不同   
  2. // $(document).read(function() {});   
  3. $(function() {   
  4. //找到表格的内容区域中(除第一个tr以外)的所有奇数行   
  5. //使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行   
  6. $(“tbody tr:even”).css(“background-color”,”ECE9D8”);   
  7.   
  8. // 我们需要找到所有的学号单元格   
  9. var numTd = $(“tbody td:even”);   
  10. //给这些单元格注册鼠标点击的事件   
  11. numTd.click(function() {   
  12.     // 创建一个文本框   
  13.    var inputObj = $(“<input type=’text’>”)   
  14.     //去掉文本框的边框   
  15.     inputObj.css(“border-width”,”0”);   
  16.     //设置文本框中的文字字体大小是16px   
  17.     inputObj.css(“font-size”;”16px”);   
  18.     // 找到当前鼠标点击的td,this对应的就是响应了click的那个td   
  19.     var tdObj = $(this);   
  20.     //使文本框的宽度和td宽度相同   
  21.     inputObj.width(tdObj.width());   
  22.     //设置文本框的背景色   
  23.     inputObj.css(“background-color”,tdObj.css(“background-color”));   
  24.     // 需要将当前td中的内容放到文本框中   
  25.     inputObj.val(tdObj.html());   
  26.     // 清空td中的内容   
  27.     tdObj.html(“”);   
  28.     // 将文本框插入到td中   
  29.     inputObj.appendTo(tdObj);   
  30.     ……..   
  31. });   
  32. });  

精简版eidtTable.js

  1. //需要首先通过javascript来解决内容部分奇偶行的背景色不同   
  2. // $(document).read(function() {});   
  3. $(function() {   
  4. //找到表格的内容区域中(除第一个tr以外)的所有奇数行   
  5. //使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行   
  6. $(“tbody tr:even”).css(“background-color”,”ECE9D8”);   
  7.   
  8. // 我们需要找到所有的学号单元格   
  9. var numTd = $(“tbody td:even”);   
  10. //给这些单元格注册鼠标点击的事件   
  11. numTd.click(function() {   
  12.     var tdObj = $(this);   
  13.     var text = tdObj.html();   
  14.     tdObj.html(“”);   
  15.     if(tdObj.children(“input”).length >0) {   
  16.         return false;   
  17.     }   
  18.        
  19.     var inputObj = $(“<input type=’text’>”).css(“border-width”,”0”)   
  20. .css(“font-size”,”16px”).width(tdObj.width()).css(“background-color”,tdObj   
  21. .css(“background-color”)).val(text).appendTo(tdObj);   
  22.   
  23.     inputObj.trigger(“focus”).trigger(“select”);   
  24.     inputObj.click(function() {   
  25.         return false;   
  26. });   
  27. //处理问你看上回车和esc按键的操作   
  28. inputObj.keyup(function(event) {   
  29.     var keycode = event.which;  //获取当前按下键盘的键值   
  30.     //处理回车的情况   
  31.     if(keycode == 13) {   
  32.         var inputtext = $(this).val(); //获取当前文本框中的内容   
  33.         tdObj.html(inputtext); //将td的内容修改成文本框中的内容   
  34.     }   
  35.     //处理esc的情况   
  36. if(keycode == 27) {   
  37.        tdObj.html(text); //将td中的内容还原成text   
  38.     }   
  39. });   
  40. });   
  41. });  
  • 1
  • 2
  • 下一页

相关内容