JQuery实战总结一可编辑的表格

最新推荐文章于 2018-08-26 16:08:19 发布

dbeautifulLife

最新推荐文章于 2018-08-26 16:08:19 发布

阅读量539

点赞数

分类专栏： jquery

jquery 专栏收录该内容

3 篇文章

订阅专栏

这里要先引入jquery.js文件，和自己编写的js文件EditTable.js文件、CSS样式文件，就能达到我们想要的效果噢

[html]view plaincopy 
   
print?
 <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
     <head>  
         <title>JQuery实例2，可以编辑的表格</title>  
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
         <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>A0001</td>  
              <td>李社河</td>  
            </tr>  
             <tr>  
              <td>B0002</td>  
              <td>李四</td>  
            </tr>  
             <tr>  
              <td>C0003</td>  
              <td>李龙</td>  
            </tr>  
             <tr>  
              <td>D0004</td>  
              <td>赵六</td>  
            </tr>  
         <tbody>  
     </table>  
 </body>  
 </html>  
   
 </span>  

CSS：控制表格中的样式

[css]view plaincopy 
   
print?
 <span style="font-size:18px;">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;  
 }</span>  

editTable.js，真正的实现可修改的部分的内容区域

[javascript]view plaincopy 
   
print?
 <span style="font-size:18px;">//需要通过Javascript来解决内容部分基偶行的背景颜色不同  
 //$(document).ready(function(){  
 //  
   
 //});  
 //简化的ready写法  
 $(function(){  
 //找到表格的内容区域中除了第一个tr以外的所有的奇数行  
         //使用even是为了把通过tbody tr返回的所有tr元素中，  
         //在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的技术行  
                 $("tbody tr:even").css("background-color","#ECE9D8");  
   
         //需要找到所有的学号单元格  
 //$("tbody td:even").css("background-color","red")        
             var numId = $("tbody td:even");   
             //给这些单元格注册鼠标点击事件  
             numId.click(function(){  
                 //找到当前的鼠标点击td,this对应的就是响应了click的那个td  
                     var tdObj = $(this);  
                     if (tdObj.children("input").length >0){  
                     //当前的td中input,不执行click处理  
                     return false;  
                     }  
                       
                     var text = tdObj.html();  
                      //清空td中的内容  
                     tdObj.html("");  
                       
                     //创建一个文本框  
                     //去掉 文本框的边框  
                     //设置文本框的文字字体大小是16px  
                     //是文本框的宽度和td的宽度相同  
                     //设置文本框的背景色  
                     //需要将当前的td中的内容放到文本框中  
                     //将文本框插入到td中  
                     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);  
                     //文本框插入之后被选中  
                     inputObj.trigger("focus").trigger("select");  
                     inputObj.click(function(){  
                     return false;  
                     });  
                     //处理文本框上回车和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);  
                     }  
                     });  
                 });  
               
 });</span>  