jquery实现可编辑的表格
2013-10-08 17:06
288 查看
原文地址：jquery实现可编辑的表格作者：郑君华今天来演示一个用jquery完成的效果：可编辑的表格。
1.先写一个含有表格的页面jqueryEdit.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery示例3:可修改的表格</title>
<script type="text/javascript"
src="jslib/jquery.js"></script>
<script type="text/javascript"
src="jslib/jqueryEditUseBlur.js"></script>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>1234</td>
<td>5678</td>
</tr>
</tbody>
</table>
</body>
</html>
2.书写一个javaScript脚本文件，来完成表格的可编辑效果，jqueryEdit.js:
这个文件中，当输入框修改完后是按回车键提交的，下面一个文件是通过鼠标相对文本框失去焦点来实现提交的，本人认为下面第二种方法比较合乎实际一点。
//在页面加载的时候，让所有的td有一个点击事件
$(document).ready(function(){
var tdNods =
$("td");
tdNods.click(tdClick);
});
//td点击触发的函数
function tdClick(){
//1.取出当前td里面的文本内容
var td = $(this);
var tdText = td.text();
//2.清空td里面的文本内容
td.html(""); //也可以使用td.empty();
//3.建立一个输入框，也就是input标签
var input = $("<input>");
//4.将输入框的内容设为刚才保存的td里面的文本内容
input.attr("value",tdText);
//4.5.让文本框能够响应键盘按下的keyup事件，主要是用于处理回车确认
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是回车按下
if(keyCode == 13){
//2.保存当前输入框的内容
var input = $(this);
var inputText = input.val();//这个地方不能用text(),而是用val()
//3.清空td的内容,即去掉输入框
var td = input.parent("td");
td.empty();
//4.将保存的文本内容填充到td中去
td.html(inputText);
//5.让td重新拥有点击事件
td.click(tdClick);
}
});
//5.将输入框加到td中
td.append(input); //也可以用input.appendTo(td);
//5.5 让文本框中的文字被高亮选中
//需要将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//6.需要移除td上的点击事件
td.unbind("click");
};
下面这个脚本文件是通过鼠标相对文本框失去焦点来实现提交的jqueryEditUseBlur.js:
下面用红色显示的是与上面文件不一样的地方。
//在页面加载时候，就使td节点具有click点击能力
$(document).ready(function(){
var tdNods =
$("td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick(){
//将td的文本内容保存
var td =
$(this);
var tdText =
td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input =
$("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件，当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
//将td的内容，即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom
= input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
3.对上面的效果进行进一步的修改，使之更加人性化（红色字体是修改过的地方）
通过修改使你在修改的过程中文本的内容可以按Esc键撤销还原到修改前的状态
//在页面加载时候，就使td节点具有click点击能力
$(document).ready(function(){
var tdNods =
$("td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick(){
//将td的文本内容保存
var td =
$(this);
var tdText =
td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input =
$("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件，当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
//将td的内容，即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
});
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是ESC键按下
if(keyCode == 27){
//将input输入框的值还原成修改之前的值
input.val(tdText);
}
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom
= input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
1.先写一个含有表格的页面jqueryEdit.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery示例3:可修改的表格</title>
<script type="text/javascript"
src="jslib/jquery.js"></script>
<script type="text/javascript"
src="jslib/jqueryEditUseBlur.js"></script>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>1234</td>
<td>5678</td>
</tr>
</tbody>
</table>
</body>
</html>
2.书写一个javaScript脚本文件，来完成表格的可编辑效果，jqueryEdit.js:
这个文件中，当输入框修改完后是按回车键提交的，下面一个文件是通过鼠标相对文本框失去焦点来实现提交的，本人认为下面第二种方法比较合乎实际一点。
//在页面加载的时候，让所有的td有一个点击事件
$(document).ready(function(){
var tdNods =
$("td");
tdNods.click(tdClick);
});
//td点击触发的函数
function tdClick(){
//1.取出当前td里面的文本内容
var td = $(this);
var tdText = td.text();
//2.清空td里面的文本内容
td.html(""); //也可以使用td.empty();
//3.建立一个输入框，也就是input标签
var input = $("<input>");
//4.将输入框的内容设为刚才保存的td里面的文本内容
input.attr("value",tdText);
//4.5.让文本框能够响应键盘按下的keyup事件，主要是用于处理回车确认
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是回车按下
if(keyCode == 13){
//2.保存当前输入框的内容
var input = $(this);
var inputText = input.val();//这个地方不能用text(),而是用val()
//3.清空td的内容,即去掉输入框
var td = input.parent("td");
td.empty();
//4.将保存的文本内容填充到td中去
td.html(inputText);
//5.让td重新拥有点击事件
td.click(tdClick);
}
});
//5.将输入框加到td中
td.append(input); //也可以用input.appendTo(td);
//5.5 让文本框中的文字被高亮选中
//需要将jquery对象转化为DOM对象
var inputDom = input.get(0);
inputDom.select();
//6.需要移除td上的点击事件
td.unbind("click");
};
下面这个脚本文件是通过鼠标相对文本框失去焦点来实现提交的jqueryEditUseBlur.js:
下面用红色显示的是与上面文件不一样的地方。
//在页面加载时候，就使td节点具有click点击能力
$(document).ready(function(){
var tdNods =
$("td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick(){
//将td的文本内容保存
var td =
$(this);
var tdText =
td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input =
$("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件，当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
//将td的内容，即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom
= input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
3.对上面的效果进行进一步的修改，使之更加人性化（红色字体是修改过的地方）
通过修改使你在修改的过程中文本的内容可以按Esc键撤销还原到修改前的状态
//在页面加载时候，就使td节点具有click点击能力
$(document).ready(function(){
var tdNods =
$("td");
tdNods.click(tdClick);
});
//td的点击事件
function tdClick(){
//将td的文本内容保存
var td =
$(this);
var tdText =
td.text();
//将td的内容清空
td.empty();
//新建一个输入框
var input =
$("<input>");
//将保存的文本内容赋值给输入框
input.attr("value",tdText);
//将输入框添加到td中
td.append(input);
//给输入框注册事件，当失去焦点时就可以将文本保存起来
input.blur(function(){
//将输入框的文本保存
var input = $(this);
var inputText = input.val();
//将td的内容，即输入框去掉,然后给td赋值
var td = input.parent("td");
td.html(inputText);
//让td重新拥有点击事件
td.click(tdClick);
});
input.keyup(function(event){
//1.获取当前用户按下的键值
//解决不同浏览器获得事件对象的差异,
// IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//2.判断是否是ESC键按下
if(keyCode == 27){
//将input输入框的值还原成修改之前的值
input.val(tdText);
}
});
//将输入框中的文本高亮选中
//将jquery对象转化为DOM对象
var inputDom
= input.get(0);
inputDom.select();
//将td的点击事件移除
td.unbind("click");
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现仿Excel表格编辑功能 - Handsontable
- Jquery实现简单的表格添加、编辑、删除教程
- 用jquery实现可以编辑表格
- jquery 实现可编辑的表格
- JQuery实现可编辑的表格
- 【随记】JQuery表头不动显示垂直滚动条的表格，全选反选框实现，双击可编辑综合
- jquery实现编辑表格
- jQuery实现可编辑表格
- jQuery一步一步实现跨浏览器的可编辑表格，支持IE、Firefox、Safari、Chrome、Opera
- JQuery结合Ajax实现双击Table表格，使Table变成可编辑，并保存到数据库中
- 基于Bootstrap使用jQuery实现简单可编辑表格
- jQuery实现编辑修改表格table
- jQuery之可编辑表格的实现
- 可编辑的表格(续集)：jQuery实现对所编辑内容的验证
- JQuery实现可直接编辑的表格
- jquery实现双击编辑表格
- jquery实现可编辑的表格
- [原创+源码]绝对强悍:jQuery实现可编辑表格的用户管理系统(一)
- JQuery实现可编辑的表格实例讲解（2）