jQuery实战-可以编辑的表格

可以编辑的表格EditTable.htmlHtml代码

<html>
<head>
<title>可以编辑的表格</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
<link type=”text/css” rel=”stylesheet” href=”css/editTable.css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/editTable.js”></script>
</head>
<body>
<table>
<thead>
<tr>
<th colspan=”2”>鼠标点击表格项就可以编辑</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>
</tbody>
</table>
</body>
</html>

editTable.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: #A3BAE9;
}

editTable.js

//需要首先通过javascript来解决内容部分奇偶行的背景色不同
// $（document）.read（function（） {}）;
$（function（） {
//找到表格的内容区域中（除第一个tr以外）的所有奇数行
//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行
$（“tbody tr:even”）.css（“background-color”,”ECE9D8”）;
// 我们需要找到所有的学号单元格
var numTd = $（“tbody td:even”）;
//给这些单元格注册鼠标点击的事件
numTd.click（function（） {
// 创建一个文本框
var inputObj = $（“<input type=’text’>”）
//去掉文本框的边框
inputObj.css（“border-width”,”0”）;
//设置文本框中的文字字体大小是16px
inputObj.css（“font-size”;”16px”）;
// 找到当前鼠标点击的td,this对应的就是响应了click的那个td
var tdObj = $（this）;
//使文本框的宽度和td宽度相同
inputObj.width（tdObj.width（））;
//设置文本框的背景色
inputObj.css（“background-color”,tdObj.css（“background-color”））;
// 需要将当前td中的内容放到文本框中
inputObj.val（tdObj.html（））;
// 清空td中的内容
tdObj.html（“”）;
// 将文本框插入到td中
inputObj.appendTo（tdObj）;
……..
}）;
}）;

精简版eidtTable.js

//需要首先通过javascript来解决内容部分奇偶行的背景色不同
// $（document）.read（function（） {}）;
$（function（） {
//找到表格的内容区域中（除第一个tr以外）的所有奇数行
//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行
$（“tbody tr:even”）.css（“background-color”,”ECE9D8”）;
// 我们需要找到所有的学号单元格
var numTd = $（“tbody td:even”）;
//给这些单元格注册鼠标点击的事件
numTd.click（function（） {
var tdObj = $（this）;
var text = tdObj.html（）;
tdObj.html（“”）;
if（tdObj.children（“input”）.length >0） {
return false;
}
var inputObj = $（“<input type=’text’>”）.css（“border-width”,”0”）
.css（“font-size”,”16px”）.width（tdObj.width（））.css（“background-color”,tdObj
.css（“background-color”））.val（text）.appendTo（tdObj）;
inputObj.trigger（“focus”）.trigger（“select”）;
inputObj.click（function（） {
return false;
}）;
//处理问你看上回车和esc按键的操作
inputObj.keyup（function（event） {
var keycode = event.which; //获取当前按下键盘的键值
//处理回车的情况
if（keycode == 13） {
var inputtext = $（this）.val（）; //获取当前文本框中的内容
tdObj.html（inputtext）; //将td的内容修改成文本框中的内容
}
//处理esc的情况
if（keycode == 27） {
tdObj.html（text）; //将td中的内容还原成text
}
}）;
}）;
}）;