前段时间做项目用到了可以编辑的表格,本篇博客主要是简单总结JQuery部分实现可以编辑的表格,没有与数据库的交互部分,下篇博客会详细解说AJax部分。
首先是准备表格,样式自定,例子中我用了表格很简单的样式。
html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="editTable.css" rel="stylesheet" />
<script src="jquery.js" type="text/javascript"></script>
<script src="editTable.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<th>艺术家</th>
<th>所在职</th>
</tr>
<tr>
<td>青峯</td>
<td>主唱</td>
</tr>
<tr >
<td>馨仪</td>
<td>贝斯</td>
</tr>
<tr >
<td>家凯</td>
<td>吉他</td>
</tr>
<tr >
<td >阿福</td>
<td>木吉他</td>
</tr>
<tr>
<td >阿龚</td>
<td>键盘</td>
</tr>
</table>
</div>
</form>
</body>
</html>
样式表
body {
/*无边距*/
margin:0px;
padding:0px;
/*字体大小*/
font-size:16px;
}
/*表格样式*/
table,tr,td,th {
border:1px solid #A3A3A3;
border-collapse:collapse;
background-color:#E4E4E4;
}
td {
width:200px;
height:30px;
text-align:center;
}
js文件
$(function () {
//找到所有名字的单元格
var name = $("tbody td:even");
//给这些单元格注册鼠标点击事件
name.click(function () {
//找到当前鼠标单击的td
var tdObj = $(this);
//保存原来的文本
var oldText = $(this).text();
//创建一个文本框
var inputObj = $("<input type='text' value='" + oldText + "'/>");
//去掉文本框的边框
inputObj.css("border-width", 0);
inputObj.click(function () {
return false;
});
//使文本框的宽度和td的宽度相同
inputObj.width(tdObj.width());
inputObj.height(tdObj.height());
//去掉文本框的外边距
inputObj.css("margin", 0);
inputObj.css("padding", 0);
inputObj.css("text-align", "center");
inputObj.css("font-size", "16px");
inputObj.css("background-color", tdObj.css("background-color"));
//把文本框放到td中
tdObj.html(inputObj);
//文本框失去焦点的时候变为文本
inputObj.blur(function () {
var newText = $(this).val();
tdObj.html(newText);
});
//全选
inputObj.trigger("focus").trigger("select");
});
});
页面效果:
单击艺术家列,就可以对表格进行修改。
单击其他地方进行了修改
以上主要是利用JQuery进行基础的效果演示,下篇博客将会与数据库交互,真正的进行修改。