今天小编给大家介绍下jQuery一步一步实现跨浏览器的可编辑表格支持IE、Firefox、Saf，平时喜欢jQuery一步一步实现跨浏览器的可编辑表格支持IE、Firefox、Saf的朋友赶紧收藏起来吧！记得点赞哦~
要实现可编辑的表格功能，我们要解决以下问题：
1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）;
2.如何让单元格变成可以编辑的;
3.如何处理单元格的一些按键事件;
4.解决跨浏览器问题。
我们通过jQuery可以一步一步解决上述问题。
一、 绘制表格
首先我们先画好一个表格。
Code1:
代码如下:
!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejQuery的跨浏览器可编辑表格/title
link rel="stylesheet" type="text/css" href="css/editTable.css" media="all"/
script type="text/javascript" src="js/jquery-1.3.2.min.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
td000001/td
td张三/td
/tr
tr
td000002/td
td李四/td
/tr
tr
td000003/td
td王五/td
/tr
tr
td000004/td
td赵六/td
/tr
/tbody
/table
/body
/html
画好表格以后显示的如图：
editTable01.jpg
很明显它看起来不像一个表格，既没有边框，而且很丑。那么我们先给这个表格设置一些样式。
Code2:
代码如下:
body{}{
font-size: 14px;
}
table{}{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
th{}{
width: 50%;
border: 1px solid #C1DAD7;
}
td{}{
width: 50%;
border: 1px solid #C1DAD7;
}
现在效果好多了：
editTable02.jpg
但是单元格和单元格之间还是有重叠的边框，只需要在标签选择符table中加上这样一个属性就能去除重复边框：
border-collapse: collapse;
代码如下:
table{}{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
editTable03.jpg
二、 让表格的单元格变成可编辑的列
绘制好表格以后，我们选取表格中的编号列作为可编辑的列。要让这一列的单元格能够被编辑，就需要在这些列中插入文本框，我们通过这一列单元格的onclick事件来插入文本框。
Code3:
代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody ");
//单击这些td时，创建文本框
(function(){
//创建文本框对象
var inputobj = $("input type="text"");
//获取当前点击的单元格对象
var tdobj = $(this);
//去除文本框的border
("","");
//让文本框和单元格的宽度保持一致
(());
//让文本框的字体和单元格的字体大小一样
inputobj.css("font-size",tdobj.css("font-size"));
//让文本框和单元格的字体保持一致
inputobj.css("font-family",tdobj.css("font-family"));
//让文本框和单元格的背景保持一致
inputobj.css("background-color",tdobj.css("background-color"));
//appendTo方法把文本框添加到td中
inputobj.appendTo(tdobj);
});
});
现在已经把文本框插入到单元格中了。既然要编辑文本框，文本框就应该有值，文本框的值
