456主机测评
要实现可编辑的表格功能，我们要解决以下问题：
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
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;
}
table{}{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
$(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);
});
});
$(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);
});
});
$(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);
});
});
editTable05.jpg
是什么原因造成上面这个bug呢？因为在文本框中插入单元格之后，文本框是属于单元格的，我们点击文本框时，同样会触发单元格的click事件。
我们需要阻止文本框的点击行为（阻止事件冒泡）。
Code6:
inputobj.click(function(){
return false;
});
$(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;
});
});
});
inputobj.get(0).select();
inputobj.trigger("focus").trigger("select");
//处理文本框上回车和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);
}
});
$(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);
}
});
});
});
- 海报
