您的位置：首页 > Web前端 > JQuery

jQuery--编辑表格

2015-08-23 22:03 621 查看

表格操作是我们经常遇到的，还记得刚开始学习牛腩新闻发布系统时，跟着视频进行表格的一些基本操作，而对它的原理与概念完全不懂，仅仅是跟着老师的操作而进行操作。通过这次学习，对表格的操作有了进一步的了解与掌握。

首先来看一下其效果：（网页效果：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的地方有很多，初次接触的时候，感觉无从下手。不过，经过这些实例之后，不能说掌握，但最起码已经找到了入手点。所以，学习的同时，一定要亲自动手操作，哪怕是看似简单的例子，也要用心。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jQuery

相关文章推荐

新的分享

章节导航