用 jQuery编写的可编辑的表格
1、 思路
首先实现隔行换色的效果
当点击想要修改的列时，创建文本框
当点击 enter时提交数据，当点击esc返回的键时，取消输入的内容
2．代码解析
Html代码 ：
<body>
<div align="center">
<h1>
显示员工界面
</h1>
<table>
<thead>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td>序号 </td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>出生日期</td>
<td>薪资</td>
<td>部门</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td >1</td>
<td>老王</td>
<td>女</td>
<td>23</td>
<td>5435343</td>
<td>10000</td>
<td>河软</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td>1</td>
<td>老王</td>
<td>女</td>
<td>23</td>
<td>5435343</td>
<td>10000</td>
<td>河软</td>
</tr>
<tr>
<td><input type="checkbox" name="chk"> </td>
<td>1</td>
<td>老王</td>
<td>女</td>
<td>23</td>
<td>5435343</td>
<td>10000</td>
<td>河软</td>
</tr>
</tbody>
</table>
</div>
</body>
Js代码为:
$(document).ready(function(){
//实现隔行变色的效果
//首先获取tbody中的所有的tr，然后采用：even选择出奇数行的所有的特点，但是返回的是偶数行
$("tbody>tr:even").css("background-color","pink");
///功能一样，是偶数行，实际是奇数行
$("tbody>tr:odd").css("background-color","#BEBEBE");
//当点击tbody中的td时，能够把td中的内容替换成一个text框，进行修改
//点击enter 能够提交数据 点击esc键撤销修改
//获取所有的tr,并注册事件,因为在遍历的时候序号不可编辑，所以序号这一列不能编辑
$("tbody tr").each(function(index,dom){
//通过dom得到所有的tr，判断tr中的td如果是>2的才可以编辑
$(dom).children("td:gt(1)").click(function(){
//获取td的jQuery对象
var $td = $(this);//注意得到td的jQuery的对象的时候用的是this,也就是点击哪个获取哪个，如果用的是dom,得到的是整行。
//得到文本框内容
var tdText = $td.text(); //text 取得所有匹配元素的内容。
//判断如果已经创建了input，就不在创建了，如果没有创建，在创建,是通过判断孩子节点
if($td.children("input").length>0){
return false;
}
//清空td中的文本
$td.html(""); //设置每一个匹配元素的html内容
//创建可编辑的input
var $input = $("<input type='text'/>");
$input.css("background-color",$td.css("background-color"));//设置input的框元素和td中的颜色相同
$input.css("width",$td.width());//宽度和td的宽度相同
$input.css("border-width",0);//文本框的边框为0
//在得到文本框的同时得到文本框以前的内容
$input.val(tdText); //获得第一个匹配元素的当前值。
//把创建的input放到td中
$td.append($input);
//当触发td的键盘事件的时候，如果点enter键，保存，如果点esc，取消输入的内容
$td.keyup(function(event){
//获取键盘按下的事件
var key = event.which;
//alert(key);
if (key == 13) {
$td.html($input.val());//得到文本框的值并放到td中
}else if(key==27){
$td.html(tdText);
}
});
});
});
});
3.总结
在这里我大概总结一下text(),val(),html()的区别，因为在这个例子之间，反复用到了这几个属性
html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
html(val):设置每一个匹配元素的html内容
val():获得第一个匹配元素的当前值。
val(val): 设置每一个匹配元素的值。
text():取得所有匹配元素的内容。
text(val): 设置所有匹配元素的文本内容
效果图为：
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...