<html> <head> <title>JQuery动态编辑的表格DATA</title> <!--<meta charset="utf-8">--> <link rel="stylesheet" type="text/css" href="editTable.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script src = "editTable.js"></script> </head> <body> <table> <thead> <tr> <th colspan="2">可以编辑的表格</th> </tr> </thead> <tbody> <tr> <th>学号</th> <th>姓名</th> </tr> <tr> <td>000001</td> <td>张三</td> </tr> <tr> <td>000002</td> <td>李四</td> </tr> <tr> <td>000003</td> <td>王五</td> </tr> <tr> <td>000004</td> <td>赵六</td> </tr> </tbody> </table> </body> </html>
$(document).ready(function(){
//$("tbody td:even")得到表格左边的单元格。:even表示：匹配所有索引值为偶数的元素，从 0 开始计数
$("tbody tr:even").css("background-color","#ECE9D8");
var numId = $("tbody td:even");
//所有的得到表格左边的单元格都注册了点击事件
numId.click(function(){
var tdObj = $(this);//获得当前td单元格对象
//当前文本框里是否有input对象，children()表示：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
if(tdObj.children("input").length>0){
return false;
}
var inputObj = $("<input type='text'>");//创建文本对象封装成JQuery对象
//html()：取得第一个匹配元素的html内容
var text = tdObj.html();
inputObj.val(text);//将单元格里面的内容赋值到创建的文本对象
tdObj.html("");//将当前td单元格内容清空
inputObj.width(tdObj.width());//设置文本框对象的宽度与单元格的宽度相同
inputObj.css("border-width","0");//设置文本框的边框
inputObj.css("font-size","16px");//设置文本框字体与单元格中的字体大小一样
//设置文本框的背景色与单元格的背景色相同
inputObj.css("background-color",tdObj.css("background-color"));
inputObj.appendTo(tdObj);//将文本框追加到单元格中
//inputObj是JQuery对象,get(0)获到的就是一个DOM对象即文本框（非JQuery对象）
//inputObj.get(0).select();
//trigger()：在每一个匹配的元素上触发某类事件。先触发focus后触发select事件
inputObj.trigger("focus").trigger("select");
//文本框的单击事件
inputObj.click(function(){
return false;
});
//处理文本框上的Enter和ESC事件
inputObj.keyup(function(event){
//获得当前所按下的键盘的键值
var keyCode = event.which;
if(keyCode == 13){//Enter
var inputObjText = $(this).val();
tdObj.html(inputObjText);
tdObj.remove("input");
}else if(keyCode == 27){//Esc
tdObj.html(text);
jAlert(text, '确认');
tdObj.remove("input");
}
});
});
});
table {
border:1px solid black;
/**
* border-collapse : separate | collapse
* 设置或检索表格的行和单元格的边是合并在一起(collapse没有边框)还是按照标准的HTML样式分开
**/
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;
}
来自：I forgot.
博客已移至http://blog.aboutc.net/欢迎访问
相关推荐
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
使用jQuery实现动态可编辑表格，代码更少，兼容性更好
jQuery表格添加行数据代码是一款可以在行内添加编辑删除的表格代码。
JQuery实现的简单可编辑表格，其中的数据可以根据需要从数据里读取，这里暂时写成静态的，只是为了演示一下JQuery的方便之处。
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ，支持增加，编辑，删除行，日期狂，下拉框联动显示数据，测试ok
一款简洁实用的自适应PC手机端的jQuery可编辑表格代码，jQuery表格添加删除行数据代码，使用起来十分的方便。
jqueryTable编辑的实现 鼠标点击表格即可编辑，onblur时候出发Ajax时间 保存数据（带娇艳功能）。
jQuery表格编辑添加删除行插件是一款表格插件，默认设置json数据动态生成表格。
双击表格元素TD时，在其中嵌入INPUT对象并接收TD元素数据，进行编辑后失焦点时数据由INPUT对象回送到TD元素。
jQuery AJAX表格控件(初版)源码 测试版 JQUERY 实现的AJAX表格操作控件 设计上需要改进 初步功能已实现 边个实现了数据库的添加 编辑 删除等基本功能 详细请查看代码
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码，jQuery表格添加删除行数据代码，使用起来十分的方便。
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头，编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
ayGrid是一个基于jQuery的表格插件，可实现在表格上在线修改、增加、删除、保存数据！其中，单元格的编辑可以实现CheckBox、ComboBox、Input的输入方式。表格数据传输基于JSON。
jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据，很实用！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
非常实用的特效代码，可以完美运行，可以二次修改！
jQuery自定义数据表格编辑插件是一款点击自动获得表格的数据内容特效。
jQuery表格编辑添加删除行插件是一款表格插件，默认设置json数据动态生成表格。
jQuery网页版excel表格代码是一款智表ZCELL试用版测试，创建表格加载json数据，表格编辑操作代码。
JQuery中dategrid编辑状态下的数据长度限制方法小结[整理].pdf
使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据的实现代码。