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

jQuery实现可编辑的表格

2012-03-01 20:02 441 查看

html代码如下：

<body>
<div align="center">
<table border="1px">
<thead>
<tr>
<th>
姓名
</th>
<th>
性别
</th>
<th>
年龄
</th>
</tr>

</thead>
<tbody>
<tr>
<td>redarmy7</td>
<td>M</td>
<td>22</td>
</tr>
<tr>
<td>redarmy6</td>
<td>M</td>
<td>22</td>
</tr>
<tr>
<td>redarmy5</td>
<td>M</td>
<td>22</td>
</tr>
<tr>
<td>redarmy4</td>
<td>M</td>
<td>22</td>
</tr>
<tr>
<td>redarmy3</td>
<td>M</td>
<td>22</td>
</tr>
<tr>
<td>redarmy2</td>
<td>M</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>

JS代码如下：

$(document).ready(function() {
// 首先实现 表格的各行换色
// even返回的是偶数 但是在表格中实际代表的是奇数行
// 匹配所有索引值为偶数的元素，从 0 开始计数
$("tbody>tr:even").css("background-color", "antiquewhite");
// odd返回的是奇数 但是在表格中实际代表的是偶数行
// 匹配所有索引值为奇数的元素，从 0 开始计数
$("tbody>tr:odd").css("background-color", "aquamarine");

// 找到 tbody中所有的td操作
var $tds = $("tbody td");
// 给$tds注册点击事件
$tds.click(function() {
// 获取被点击的td
var $td = $(this);
// 检测此td是否已经被替换了，如果被替换直接返回
if ($td.children("input").length > 0) {
return false;
}

// 获取$td中的文本内容
var text = $td.text();

// 创建替换的input 对象
var $input = $("<input type='text'>").css("background-color",
$td.css("background-color")).width($td.width());
// 设置value值
$input.val(text);

// 清除td中的文本内容
$td.html("");
$td.append($input);

// 处理enter事件和esc事件
$input.keyup(function(event) {
// 获取当前按下键盘的键值
var key = event.which;
// 处理回车的情况
if (key == 13) {
// 获取当当前文本框中的内容
var value = $input.val();
// 将td中的内容修改成获取的value值
$td.html(value);
} else if (key == 27) {
// 将td中的内容还原
$td.html(text);
}
});
});

});

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

标签： jquery input function border html

相关文章推荐

新的分享

章节导航