您的位置：首页 > Web前端 > JQuery

用jquery实现可以编辑表格

2010-03-05 21:55 555 查看

用jquery实现可以编辑表格
index.html 代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可编辑的表格</title>
<mce:script type="text/javascript" src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript" src="js/myjs.js" mce_src="js/myjs.js"></mce:script>
<link type="text/css" rel="stylesheet" href="css/css.css" mce_href="css/css.css">
</head>
<body>
<center>
<table>
<thead>
<tr><th colspan="2">鼠标点击可以编辑表格</th></tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>

<tr>
<td>001</td>
<td>张三</td>
</tr>

<tr>
<td>002</td>
<td>李四</td>
</tr>

<tr>
<td>003</td>
<td>王五</td>
</tr>

<tr>
<td>004</td>
<td>赵六</td>
</tr>
</tbody>
</table>

</center>

</body>
</html>

css.css文件如下：

table{
border: 1px solid black;
border-collapse: collapse;
/*修正单元格不能合并的问题*/
width: 400px;
}
table td{
border: 1px solid black;
width: 50%;
}

table th{
border: 1px solid black;
width: 50%;
}
tbody th{
background-color:#B3B34D;
}

myjs.js原代码如下：

//需要首先通过javascript来解决内容部分 背景色不同
//$("document").ready(function (){
//
//
//});
$(function (){
//找到所有的偶数行出了第一个
$("tbody tr:even").css("background-color","#FFFACD");
//odd基数个结果
//even为了把通过tbody tr返回的所有的TR元素中下表是偶数的返回

//找到所有的学号的单元格
var numtd = $("tbody td:even");
//给这些单元格注册鼠标点击的事件。
numtd.click(function (){
var tdobj=$(this);
//不执行原来的东西
if(tdobj.children("input").length >0){
return false;
}
var text =tdobj.html();
tdobj.html("");
//创建文本框
//文本框的宽带和td的一样
//找到td this 对应鼠标的点击的事件

var inputobj= $("<input type='text'>").css("border-width","0")
.css("font-size","16").width(tdobj.width())
.css("background-color",tdobj.css("background-color"))
.val(text).appendTo(tdobj);

//文本框插入到td中
inputobj.trigger("focus").trigger("select");

inputobj.click(function(){
return false;
});

//处理文本狂上回车和esc按键操作
inputobj.keyup(function (event){
//处理键盘
var keycode =event.witch;
//处理回的情况
if(keycode==13)
{
var inputtext = $(this).val();
tdobj.html(inputtext);
}
//处理esc的情况
if(keycode==27){
tdobj.html(text);
}
});

});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航