jQuery实现可编辑的表格

最新推荐文章于 2021-06-16 22:37:28 发布

redarmychen

最新推荐文章于 2021-06-16 22:37:28 发布

阅读量9.5k

点赞数

分类专栏：前端技术课程系列文章标签： jquery input function border html

本文链接：https://blog.csdn.net/redarmy_chen/article/details/7310602

版权

前端技术课程系列专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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);
							}
						});
			});

});