jQuery--编辑表格

最新推荐文章于 2024-04-30 22:06:17 发布

weixin_30458043

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量67

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/lxjshuju/p/6937988.html

版权

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

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

首先来看一下其效果：（网页效果：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的地方有非常多。初次接触的时候。感觉无从下手。

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

转载于:https://www.cnblogs.com/lxjshuju/p/6937988.html

weixin_30458043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery--编辑表格

表格操作是我们常常遇到的，还记得刚開始学习牛腩新闻公布系统时。跟着视频进行表格的一些基本操作。而对它的原理与概念全然不懂，不过跟着老师的操作而进行操作。通过这次学习，对表格的操作有了进一步的了解与掌握。首先来看一下其效果：（网页效果：http://192.168.24.71:8010/%E7%BC%96%E8%BE%91%E8%A1%A8%E6%A0%BC/Ed...
复制链接

扫一扫