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--编辑表格的主要内容，如果未能解决你的问题，请参考以下文章