用 jQuery编写的可编辑的表格

文章由LinuxBoy分享于2019-03-31 09:03:09热评（654）

用 jQuery编写的可编辑的表格

1、思路

首先实现隔行换色的效果

当点击想要修改的列时，创建文本框

当点击 enter时提交数据，当点击esc返回的键时，取消输入的内容

2．代码解析

Html代码：

<body>

<h1>

显示员工界面

</h1>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</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): 设置所有匹配元素的文本内容

效果图为：

推荐文章：

用 jQuery编写的可编辑的表格