用 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","blue");
//当点击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实现可编辑化的表格，有兴趣的可以看看
JQuery实现可编辑的表格JQuery实现可编辑的表格
jquery 实现可编辑表格实例 ,jquery 实现可编辑表格实例
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
JQuery实现的简单可编辑表格，其中的数据可以根据需要从数据里读取，这里暂时写成静态的，只是为了演示一下JQuery的方便之处。
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
用JQUERY实现可编辑表格。简单，实用
JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rarJQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar
jquery可编辑表格代码实现
jQuery实现可编辑表格，支持IE、Firefox、Safari、chrome、Opera全部浏览器。
Jquery实现表格的可编辑，可以随时改变表格中的内容并保存。
双击表格元素TD时，在其中嵌入INPUT对象并接收TD元素数据，进行编辑后失焦点时数据由INPUT对象回送到TD元素。
一款简洁实用的自适应PC手机端的jQuery可编辑表格代码，jQuery表格添加删除行数据代码，使用起来十分的方便。
使用jquery实现点击表格列可以编辑，自己学习之余给大家分享
jquery将table表格变成可编辑，解压压缩包，双击html页面即可看效果
JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx JQuery可编辑表格小结.docx
可以轻松实现可编辑表格，还可以自己通过AJAX同步更新到后台
JQuery可编辑表格、横向纵向菜单、标签页、级联下拉框、窗口
jquery表格可编辑修改表格里面的数值