新的一天开始了，生活还要继续，今天要和大家分享的是不一样的table，普通的table就用于显示数据，今天要分享的table不仅仅能显示数据，还可以对数据进行编辑，当鼠标点击数据时相应的数据格就变成可编辑的状态，废话不多说，进入今天的主题，首先完成HTML页面：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQueryProject1</title>
<meta name="author" content="Frank_Ren" />
<link type="text/css" rel="stylesheet" href="css/myCSS.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.1.min.js"><script type="text/javascript" language="JavaScript" src="/UploadFiles/2021-04-02/myJSFile.js"><!-- Date: 2012-09-17 -->
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击下列内容可以进行编辑</th>
</tr>
</thead>
<tbody id="content">
<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>
没错现在它还是一个普通的table，一点样式都还没有，为了让这个table显得不那么抽象，接下来为它引入CSS样式
复制代码 代码如下:
table{
width:400px;
height: 150px;
}
table, table td, table th{
border:1px solid black;
border-collapse: collapse;
}
table td{
width:50%;
height: 25px;
}
thead th{
background-color:#87CEFA;
}
tbody th{
background-color:#FFFACD;
}
在HTML页面中可编辑的页面元素就只有那么几个，很不幸table并不是其中一个，为了让table变得可编辑，就要向table中插入可编辑的页面元素，再用CSS装饰一下，让它看起来还是一个普通的table，然而却具备了可编辑的功能，这就是JS所要完成的功能，JS代码如下：
复制代码 代码如下:
$(function(){
var content;
$("#content tr:odd").css("background-color","#D2B48C");
$("#content tr:even").css("background-color","#C0C0C0");
$("#content td").click(function(){
var clickObj = $(this);
content = clickObj.html();
changeToEdit(clickObj);
});
function changeToEdit(node){
node.html("");
var inputObj = $("<input type='text'/>");
inputObj.css("border","0").css("background-color",node.css("background-color"))
.css("font-size",node.css("font-size")).css("height","20px")
.css("width",node.css("width")).val(content).appendTo(node)
.get(0).select();
inputObj.click(function(){
return false;
}).keyup(function(event){
var keyvalue = event.which;
if(keyvalue==13){
node.html(node.children("input").val());
}
if(keyvalue==27){
node.html(content);
}
}).blur(function(){
if(node.children("input").val()!=content){
if(confirm("是否保存修改的内容？","Yes","No")){
node.html(node.children("input").val());
}else{
node.html(content);
}
}else{
node.html(content);
}
});
}
});
接下来对这段JS做简单的分析，全局变量 var content 用于保存编辑之前表格中的内容，有时候用户对表格进行编辑了但却并不想保存编辑后的结果，就需要将表格中的内容还原到编辑之前，所以当鼠标点击的时候首先要将表格的内容保存起来。
下面这两句$("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background-color","#C0C0C0"); 是让table具备隔行变色，只是为了增加表格的可视性。var inputObj = $("<input type='text'/>"); 这一句生成一个可编辑的JQuery对象，也就是要插入表格中的可编辑元素，后面那一串.css()方法是给inputObj对象追加CSS样式，.css()方法不仅可以给某个对象设置CSS样式还可以获取某个对象的CSS样式，JQuery中提供了很多这样的方法。很多时候JQuery方法执行过后返回回来的还是JQuery对象，所以就出现了inputObj.css().css().css()....这样的写法。
appendTo()方法就实现了表格的可编辑性（也可用appendix()），将可编辑元素插入到表格中。.get(0).select()这两个方法是为了选中inputObj中的内容让焦点落在可编辑元素上，需要注意的是这两个方法一定要写在appendTo()之后，inputObj.click(function(){})这个方法也是必不可少的，删掉这个方法会有一个很有趣的bug，大家可以试一试。
紧接着的 keyup(function(event){})，可以通过 event.which 的方式获取键盘按下的键所对应的键值，常用的键值有 Enter键:13、Esc键:27，当用户按下Enter键时，就保存编辑后的内容，并将表格还原成普通表格，当用户按下Esc键时，将表格中的内容还原，也将表格还原成普通表格。
用户体验，苹果的出现让这个词更深入人心，这里也凑下热闹。为了提高用户体验这里增加了blur(function(){})方法，当焦点离开可编辑元素时首先判断表格中的内容是否被改变，如果没有改变直接将表格及表格中的还原，如果有改变就提示用户是否保存。
今天的示例基本完工了，如果你将JS代码放在一个单独的JS文件中引用，可能会出现一个中文乱码的bug，不妨动手试一试。谢谢你耐心的读完本文，希望对你会有所帮助。
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQueryProject1</title>
<meta name="author" content="Frank_Ren" />
<link type="text/css" rel="stylesheet" href="css/myCSS.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.1.min.js"><script type="text/javascript" language="JavaScript" src="/UploadFiles/2021-04-02/myJSFile.js"><!-- Date: 2012-09-17 -->
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击下列内容可以进行编辑</th>
</tr>
</thead>
<tbody id="content">
<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>
没错现在它还是一个普通的table，一点样式都还没有，为了让这个table显得不那么抽象，接下来为它引入CSS样式
复制代码 代码如下:
table{
width:400px;
height: 150px;
}
table, table td, table th{
border:1px solid black;
border-collapse: collapse;
}
table td{
width:50%;
height: 25px;
}
thead th{
background-color:#87CEFA;
}
tbody th{
background-color:#FFFACD;
}
在HTML页面中可编辑的页面元素就只有那么几个，很不幸table并不是其中一个，为了让table变得可编辑，就要向table中插入可编辑的页面元素，再用CSS装饰一下，让它看起来还是一个普通的table，然而却具备了可编辑的功能，这就是JS所要完成的功能，JS代码如下：
复制代码 代码如下:
$(function(){
var content;
$("#content tr:odd").css("background-color","#D2B48C");
$("#content tr:even").css("background-color","#C0C0C0");
$("#content td").click(function(){
var clickObj = $(this);
content = clickObj.html();
changeToEdit(clickObj);
});
function changeToEdit(node){
node.html("");
var inputObj = $("<input type='text'/>");
inputObj.css("border","0").css("background-color",node.css("background-color"))
.css("font-size",node.css("font-size")).css("height","20px")
.css("width",node.css("width")).val(content).appendTo(node)
.get(0).select();
inputObj.click(function(){
return false;
}).keyup(function(event){
var keyvalue = event.which;
if(keyvalue==13){
node.html(node.children("input").val());
}
if(keyvalue==27){
node.html(content);
}
}).blur(function(){
if(node.children("input").val()!=content){
if(confirm("是否保存修改的内容？","Yes","No")){
node.html(node.children("input").val());
}else{
node.html(content);
}
}else{
node.html(content);
}
});
}
});
接下来对这段JS做简单的分析，全局变量 var content 用于保存编辑之前表格中的内容，有时候用户对表格进行编辑了但却并不想保存编辑后的结果，就需要将表格中的内容还原到编辑之前，所以当鼠标点击的时候首先要将表格的内容保存起来。
下面这两句$("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background-color","#C0C0C0"); 是让table具备隔行变色，只是为了增加表格的可视性。var inputObj = $("<input type='text'/>"); 这一句生成一个可编辑的JQuery对象，也就是要插入表格中的可编辑元素，后面那一串.css()方法是给inputObj对象追加CSS样式，.css()方法不仅可以给某个对象设置CSS样式还可以获取某个对象的CSS样式，JQuery中提供了很多这样的方法。很多时候JQuery方法执行过后返回回来的还是JQuery对象，所以就出现了inputObj.css().css().css()....这样的写法。
appendTo()方法就实现了表格的可编辑性（也可用appendix()），将可编辑元素插入到表格中。.get(0).select()这两个方法是为了选中inputObj中的内容让焦点落在可编辑元素上，需要注意的是这两个方法一定要写在appendTo()之后，inputObj.click(function(){})这个方法也是必不可少的，删掉这个方法会有一个很有趣的bug，大家可以试一试。
紧接着的 keyup(function(event){})，可以通过 event.which 的方式获取键盘按下的键所对应的键值，常用的键值有 Enter键:13、Esc键:27，当用户按下Enter键时，就保存编辑后的内容，并将表格还原成普通表格，当用户按下Esc键时，将表格中的内容还原，也将表格还原成普通表格。
用户体验，苹果的出现让这个词更深入人心，这里也凑下热闹。为了提高用户体验这里增加了blur(function(){})方法，当焦点离开可编辑元素时首先判断表格中的内容是否被改变，如果没有改变直接将表格及表格中的还原，如果有改变就提示用户是否保存。
今天的示例基本完工了，如果你将JS代码放在一个单独的JS文件中引用，可能会出现一个中文乱码的bug，不妨动手试一试。谢谢你耐心的读完本文，希望对你会有所帮助。
标签：
可编辑,table
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“一样的table？不一样的table(可编辑状态table)”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 刘德华《劲歌集》24K金碟港版[WAV+CUE][1.2G]
- Faker五冠王什么意思 世界赛五冠王Faker选手介绍
- faker塞拉斯s14决赛什么出装 faker塞拉斯s14决赛出装介绍
- LOLtoc9魔法口令在哪可以找到 2024云顶之弈toc观赛魔法口令兑换码
- 黑鸭子2008《影视经典·珍藏版》试音碟[WAV+CUE]
- 碧娜《温柔吻语2》[WAV+CUE]
- Stravinsky-Symphonies,Volume1-OrquestaSinfonicadeGalicia,DimaSlobodeniouk(2024)[24-
- 外媒评Switch2：向下兼容是关键 但挑战依然存在
- 任天堂提醒：宠物的尿或唾液或会让NS故障 把它放好！
- 《博德3》再创新高 Steam掌机总游玩时长近2000年
- 张玮伽《想你的夜DSD》东升 [WAV+CUE][1G]
- 姚璎格《 粤 24KGOLD》正版低速原抓[WAV+CUE][1G]
- 杨千嬅《如果大家都拥有海》寰亚 [WAV+CUE][998M]
- 孟庭苇.1994-1990-1994钻石精选集2CD（2022环球XRCD限量版）【上华】【WAV+CUE】
- 群星.1998-华纳好情歌精选17首【华纳】【WAV+CUE】