jQuery--编辑表格

Posted lxjshuju

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery--编辑表格相关的知识,希望对你有一定的参考价值。

      表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时。跟着视频进行表格的一些基本操作。而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作。

通过这次学习,对表格的操作有了进一步的了解与掌握。

      首先来看一下其效果:(网页效果:http://192.168.24.71:8010/%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC/EditTable.html

 技术分享

实现过程:

  HTML代码:

  

<span style="font-size:18px;"><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
<title>JQuery实战2-编辑表格</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>1</td>
                   <td>王朋波</td>
           </tr>
           <tr>
             <td>2</td>
                   <td>victor</td>
           </tr>
           <tr>
             <td>3</td>
                   <td>wangpengbo</td>
           </tr>
           <tr>
             <td>4</td>
                   <td>wang</td>
           </tr>
         </tbody>
  </table>
</body>
</html></span>

 

   Javascript中的代码:

<span style="font-size:18px;">//须要通过js来解决内部奇偶行背景色不同
 
$(function(){
         //找到表格内容区域中除了第一个tr以外的全部奇数行
         //使用even是为了把通过tbodytr返回的全部元素中,在数组下标是偶数的元素返回
         $(‘tbody tr:even‘).css(‘background-color‘,‘#ECE9D8‘);
        
         //须要找到全部的学号单元格
         // $(‘tbodytd:even‘).css(‘background-color‘,‘red‘);
         var numTd=$(‘tbodytd:even‘);
         //给这些表格注冊鼠标单击的事件
         numTd.click(function(){
                  
                   //找到当鼠标点击的td。this相应的响应了click的那个id
                   vartdobj=$(this);
                   if(tdobj.children(‘input‘).length>0){
                            //当前td中 input。不运行click处理
                            returnfalse;
                   }
                   vartext=tdobj.html();
                   //清空td中的内容
                   tdobj.html(‘‘);
                   //创建一个文本框
                   //去掉文本框的边框              
                   //设置文本框中文字大小为16px
                   //使文本框的宽度与表格宽度同样              
                   // 设置文本框背景色            
                   //须要将当前td中的内容放到文本框
                   //将文本框插入。appendTo方法能够将一个节点追加到还有一个节点全部子节点的后面
                   varinputObj=$("<inputtype=‘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.get(0).select();
                  
                   inputObj.click(function(){
                            returnfalse;   //清除点击td之后出现一个HTML代码
                   })
                  
                   //处理文本框上回车和esc按键操作
                   inputObj.keyup(function(event){
                            //获取当前按下键盘的键值
                            varkeycode=event.which;
                            //处理回车的情况
                            if(keycode==13){
                                     //获取当前文本框内容
                                     varinputtext=$(this).val();
                                     //将td中的内容改动成文本框中 的内容
                                     tdobj.html(inputtext);
                            }
                            //处理esc的情况
                            if(keycode==27){
                                     //将td中的内容还原成text
                                     tdobj.html(text);
                            }
                   })
         })
})</span>

 

    Css样式中的代码:

 

<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>


      这里我们须要应用一个JQuery文件。事实上最基本的难点也在这里。只是,眼下没有对这个进行深入的研究,我们仅仅须要可以从JQuery中找到我们须要的信息。可以使用其包括的方法实现我们的功能就可以。

在本实例中须要注意的地方是奇偶行颜色的设置上,假设不使用JQuery。相对来说有点困难,过程也会繁琐。可是在JQuery中已经有了封装好的方法,even方法是获取奇数行,而odd是获取偶数行。

     

      实例小结:

       这次主要是对表格table的操作。由实例能够看出,事实上它也能够看作标签选择器;还有就是JQuery的使用,当中的方法会给我带来众多的便利,熟练掌握这些方法是我们这一阶段所须要做的。

通过这一个小实例的学习,对js的学习有了进一步的认识。尤其是如今跟着做项目,用到js和JQuery的地方有非常多。初次接触的时候。感觉无从下手。

只是。经过这些实例之后,不能说掌握。但最起码已经找到了入手点。所以,学习的同一时候,一定要亲自己主动手操作,哪怕是看似简单的样例。也要用心。




以上是关于jQuery--编辑表格的主要内容,如果未能解决你的问题,请参考以下文章

JQuery实现可直接编辑的表格

实战Jquery--能够编辑的表格

初学jquery easyui,给表格添加行内编辑器,怎么不管用啊?代码如下:

jquery-easyui 中表格的行编辑功能

使用jquery使用相同的按钮编辑多行

使用 jQuery 编辑单个表格单元格