在修改数据时，有时候为了方便，我们希望能够直接在表格里面对数据进行直接修改。
-
要实现可编辑的表格功能，我们要解决以下问题：
1.明确要修改的数据在表格中是哪些列（如何找到这些单元格）;
2.如何让单元格变成可以编辑的;
3.如何处理单元格的一些按键事件;
4.解决跨浏览器问题。
我们通过jQuery可以一步一步解决上述问题。
一、 绘制表格
首先我们先画好一个表格。
Code1:
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery的跨浏览器可编辑表格</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>
<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>
画好表格以后显示的如图：
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:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//去除文本框的border
inputobj.css("border","0");
//让文本框和单元格的宽度保持一致
inputobj.width(tdobj.width());
//让文本框的字体和单元格的字体大小一样
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);
});
});
现在已经把文本框插入到单元格中了。既然要编辑文本框，文本框就应该有值，文本框的值来源于单元格中的数据，并且我们要清空单元格中原有的数据。
Code4:
复制代码 代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody td:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//获取单元格中的文本
var text = tdobj.html();
//清空单元格的文本
tdobj.html("");
//去除文本框的border
inputobj.css("border","0");
//让文本框和单元格的宽度保持一致
inputobj.width(tdobj.width());
//让文本框的字体和单元格的字体大小一样
inputobj.css("font-size",tdobj.css("font-size"));
//让文本框和单元格的字体保持一致
inputobj.css("font-family",tdobj.css("font-family"));
//让文本框和单元格的背景保持一致
inputobj.css("background-color",tdobj.css("background-color"));
inputobj.css("color","#C75F3E");
//给文本框赋值
inputobj.val(text);
//appendTo方法把文本框添加到td中
inputobj.appendTo(tdobj);
});
});
但是以上代码看起来非常的繁琐，jQuery有一个非常好的优点，就是它的代码连缀。上面的代码可以通过连缀进行简化：
Code5:
复制代码 代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody td:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//获取单元格中的文本
var text = tdobj.html();
//清空单元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
});
});
现在表格中已经成功的插入了文本框，可以对单元格进行编辑了。
editTable04.jpg
但是有个明显的bug,当你再次点击同一个单元格时，会出现如下效果：
editTable05.jpg
是什么原因造成上面这个bug呢？因为在文本框中插入单元格之后，文本框是属于单元格的，我们点击文本框时，同样会触发单元格的click事件。
我们需要阻止文本框的点击行为（阻止事件冒泡）。
Code6:
复制代码 代码如下:
inputobj.click(function(){
return false;
});
但是点击单元格的边框时，还是会出现上述的bug,那我们做如下判断：如果单元格中已经插入了文本框，就跳出click事件。
Code7:
复制代码 代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody td:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//获取单元格中的文本
var text = tdobj.html();
//如果当前单元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前进行判断
if(tdobj.children("input").length>0){
return false;
}
//清空单元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文本框的点击事件
inputobj.click(function(){
return false;
});
});
});
上面的bug解决了，但是我发现，点击单元格时，虽然从表面上看文字是变了色，但没有让我觉得它是能被编辑的。那么我就做一点点的改动，插入文本框的同时，选中文本框的文本。
Code 8:
复制代码 代码如下:
inputobj.get(0).select();
但是问题又来了，在Safari浏览器中，要让文本框处于选中状态，必须显得让文本框获得焦点。而我们这里只是在点击单元格时，插入文本框并给文本框赋值，文本框并没有获得焦点。解决的方法：通过jQuery的trigger方法来触发某个事件。
Code9:
复制代码 代码如下:
inputobj.trigger("focus").trigger("select");
三、文本框按键事件处理
以上的这些问题解决了，那我们就再来给文本框添加一些按键事件。我们知道不同的浏览器中获取按键的keyCode是不同的，但是jQuery帮我们解决了这个问题。
只需要在事件的function中加入event参数，然后在方法体中，通过event对象的which属性就能获得keyCode,event.which属性同化了不同浏览器获取keyCode的方法。
获得keyCode之后，我主要做两个按键事件：ESC键(键值：27)和Enter键(键值：13)。
Code10:
复制代码 代码如下:
//处理文本框上回车和esc按键的操作
//jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
inputobj.keyup(function(event){
//获取当前按键的键值
//jQuery的event对象上有一个which的属性可以获得键盘按键的键值
var keycode = event.which;
//处理回车的情况
if(keycode==13){
//获取当前文本框的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdobj.html(inputtext);
}
//处理esc的情况
if(keycode == 27){
//将td中的内容还原成text
tdobj.html(text);
}
});
下面是完整的js代码：
Code11:
复制代码 代码如下:
$(document).ready(function(){
//找到学号这一列的所有单元格
//因为学号这一列的单元格在所有td中的位置是偶数（0,2,4,6），所以通过even就可以筛选到td中偶数位的单元格
var numTd = $("tbody td:even");
//单击这些td时，创建文本框
numTd.click(function(){
//创建文本框对象
var inputobj = $("<input type='text'>");
//获取当前点击的单元格对象
var tdobj = $(this);
//获取单元格中的文本
var text = tdobj.html();
//如果当前单元格中有文本框，就直接跳出方法
//注意：一定要在插入文本框前进行判断
if(tdobj.children("input").length>0){
return false;
}
//清空单元格的文本
tdobj.html("");
inputobj.css("border","0")
.css("font-size",tdobj.css("font-size"))
.css("font-family",tdobj.css("font-family"))
.css("background-color",tdobj.css("background-color"))
.css("color","#C75F3E")
.width(tdobj.width())
.val(text)
.appendTo(tdobj);
inputobj.get(0).select();
//阻止文本框的点击事件
inputobj.click(function(){
return false;
});
//处理文本框上回车和esc按键的操作
//jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
inputobj.keyup(function(event){
//获取当前按键的键值
//jQuery的event对象上有一个which的属性可以获得键盘按键的键值
var keycode = event.which;
//处理回车的情况
if(keycode==13){
//获取当前文本框的内容
var inputtext = $(this).val();
//将td的内容修改成文本框中的内容
tdobj.html(inputtext);
}
//处理esc的情况
if(keycode == 27){
//将td中的内容还原成text
tdobj.html(text);
}
});
});
});
详细出处参考：http://www.jb51.net/article/19793.htm
分享到：
相关推荐
本篇文章将详细介绍如何利用jQuery实现这一功能，支持包括IE、Firefox、Safari、Chrome和Opera在内的主流浏览器。 首先，我们需要创建一个基本的HTML表格结构，如Code1所示，包含表头（thead）和数据区域（tbody）...
本文将深入探讨如何使用jQuery实现一个跨浏览器的可编辑表格，特别是兼容IE（Internet Explorer）、Firefox、Safari、Chrome以及Opera等主流浏览器。 首先，我们需要了解jQuery的核心特性，包括选择器（Selectors）...
支持全部主流浏览器，包括IE、Firefox、Safari、Chrome和Opera，使得这种技术具有广泛的适用性。 首先，我们需要理解jQuery的基本语法。jQuery的核心在于选择器，它允许我们高效地定位到页面上的特定元素。例如，`$...
jQuery支持多种浏览器，包括IE、Firefox、Chrome、Safari和Opera等，确保了跨平台的兼容性。 二、构建Web Word编辑器 1. HTML基础 首先，我们需要创建一个基本的HTML结构，包含一个用于编辑的div元素，这个div将...
6. **浏览器兼容性**：虽然大部分现代浏览器都支持`window.print()`来打开打印对话框，但确保插件在不同浏览器上的兼容性也很重要，例如IE、Firefox、Chrome和Safari等。 7. **打印设置**：用户可能需要自定义打印...
一个良好的富文本编辑器应具备良好的浏览器兼容性，确保在主流浏览器如Chrome、Firefox、Safari、Edge和IE上都能正常工作。jQuery框架在这方面有较好的表现，但仍然需要对不同浏览器的差异进行适配。 8. **响应式...
3. 支持CSS1~CSS3定义的属性和选择器，基本的xPath技术，以及跨浏览器兼容性，支持IE6.0+、Firefox 1.5+、Safari 2.0+和Opera 9.0+。 4. 提供了丰富插件库，可以轻松扩展功能，如表单验证、Tab导航、拖放效果、表格...
wangeditor是一款轻量级且功能强大的开源JavaScript富文本编辑器，它支持多种浏览器环境，包括Chrome、Firefox、Safari、Edge以及IE9及以上版本。这个编辑器的设计目标是简洁、高效，易于集成到各种Web项目中。...
2. **兼容性**：jQuery库本身具有良好的浏览器兼容性，因此基于jQuery的编辑器也能够支持多种浏览器，包括IE、Firefox、Chrome、Safari和Opera等。 3. **插件丰富**：jQuery社区提供了大量的插件和扩展，可以为编辑...
5. **兼容性**：与主流浏览器如Chrome、Firefox、Safari、IE（至少到IE8）兼容，确保广泛的应用场景。 **主要组件介绍** 1. **表格（Grid）**：LigerUI的表格组件支持数据加载、排序、分页、过滤、编辑和删除等功能...
它支持跨浏览器运行，兼容主流浏览器如IE6.0+、Firefox 1.5+、Safari 2.0+和Opera 9.0+等。jQuery的设计特点还包括了简练的语法、易于理解的语义、易于快速学习和丰富的文档资源，它大大降低了学习和使用JavaScript...
9. **兼容性**：LigerUI考虑到跨浏览器兼容性，支持主流的Web浏览器，如Chrome、Firefox、Safari、IE等，确保在多种环境下稳定运行。 10. **文档和示例**：LigerUI提供详细的API文档和丰富的示例代码，帮助开发者...
9. **兼容性**：与主流的浏览器兼容，包括Firefox、Chrome、Safari、IE（至少到IE8）等。 10. **API和事件**：提供丰富的API接口和事件触发机制，便于开发者控制表格的行为和交互。 在实际应用中，开发人员通常会...
jQuery EasyUI 基于 jQuery，因此具有广泛浏览器兼容性，包括 IE、Firefox、Chrome、Safari 等主流浏览器。虽然它主要面向桌面应用，但通过适配和调整，也能在移动设备上实现基本的功能。 ### 7. 使用和学习资源 -...
6. **兼容性**：EasyUI 兼容主流的浏览器，包括IE6+、Firefox、Chrome、Safari和Opera，确保在多种环境下稳定运行。 7. **响应式设计**：虽然EasyUI 主要关注桌面应用，但通过一些技巧和额外的CSS调整，也能实现...
2. 兼容性好：支持多种主流浏览器，包括IE6+、Firefox、Chrome、Safari和Opera等。 3. 高度可定制：通过CSS和JavaScript，开发者可以根据项目需求定制UI样式和行为。 4. 强大的组件：内置的数据表格、树形视图、分页...
- **跨浏览器兼容性**：jQuery EasyUI 能在多种浏览器上运行，包括 Chrome、Firefox、Safari、IE 等，确保应用具有广泛的用户覆盖范围。 - **响应式设计**：虽然EasyUI主要关注桌面应用，但其组件在一定程度上支持...