本文是看网上视频教程后而写的,现在分项给大家.
目标计划:
- table隔行变色
- 点击table中的单元格可以进行编辑里面的内容
- 按回车键可以保存编辑后的内容
- 按ESC键可以还原单元格内容
1\建立解决方案,里面需要的目录结构如下:
最主要的文件是:tableEdit.css jquery-1.4.1.min.js tableEdit.js tableEidt.aspx.
2\画表格table
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/tableEdit.js" type="text/javascript"></script>
<link href="CSS/tableEdit.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<thead>
<tr>
<th colspan="2">
可以编辑的table
</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>
<tr>
<td>
000005</td>
<td>
张五
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
3\设置表格的样式
代码如下:
table
{
/*边框实线1像素*/
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%;
}
table thead th
{
background-color:Lime;
}
table tbody th
{
background-color:Blue;
}
4\编写tableEdit.js,这是核心部分
/**/
$(function () {
//设置隔行变色
//找到表格内容区域的除第一个tr外的所有的偶数行,
//table的行索引是从0开始的
//第一个tr已经在css中设置背景色了所以这不管怎么设置都不会变色,所以也不用除去第一个tr
$("tbody tr:even").css("background-color", "red");
//学号是可以编辑的
//获取所有学号td,table的列索引是从0开始的
var numTd = $("tbody td:even");
numTd.click(function () {
// //创建文本框
// var InPutObj = $("<input type='text'>");
// //获取当前单元格对象,this就是clik点击的单元格对象
// var tdObj = $(this);
// //设置文本框的边框
// InPutObj.css("border-width", "0");
// //设置文本框的字体大小
// InPutObj.css("font-size", "16px");
// //设置文本框的宽度和td的宽度一样
// InPutObj.width(tdObj.width());
// //设置文本框的背景色和td的一样
// InPutObj.css("background-color", tdObj.css("background-color"));
// //设置文本框的内容和td的一样
// InPutObj.val(tdObj.html().trim());
// //清空td中的内容
// tdObj.html("");
// //将文本框插入到td中
// InPutObj.appendTo(tdObj);
//精简代码
var tdObj = $(this);
//判断td中是否已经存在文本框,如果存在则停止td的click实践;
if (tdObj.children("input").length > 0) {
return false;
}
var text = tdObj.html().trim();
tdObj.html("");
var InputObj = $("<input type='text'>").css("border-width", "0")
.css("font-size", "16px")
.css("background-color", tdObj.css("background-color"))
.width(tdObj.width())
.val(text)
.appendTo(tdObj);
//是文本框插入之后就处于选中状态
InputObj.trigger("focus").trigger("select");
InputObj.click(function () {
return false;
});
//处理文本框上的回车和ESC按键的操做
InputObj.keyup(function (evert) {
var keycode = evert.which;
//回车
if (keycode == 13) {
//获取当前文本框的内容
var inputtext = $(this).val();
tdObj.html(inputtext);
}
//ESC
if (keycode == 27) {
tdObj.html(text);
}
});
});
});