基于jQuery的可编辑表格

最新推荐文章于 2021-07-01 21:37:23 发布

原创最新推荐文章于 2021-07-01 21:37:23 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #JavaScript #Cache #HTML #ViewUI

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现可编辑表格的方法，包括调整行背景颜色、添加文本框以进行编辑、通过键盘控制完成编辑等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可编辑的表格

通过js来处理，分四步：

要解决内部单双数背景颜色不一样
将要编辑的表格中加一个文本框
将文本框覆盖要编辑的表格，还要将原来表格中的值保存下来，并放到文本框中去
通过键盘来控制，实现Esc功能

JSP代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>可编辑的表格</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<script type="text/javascript" src="js/editTable.js"></script>
	<link rel="stylesheet" type="text/css" href="css/editTable.css">
  </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>

JS代码

/*
 * 1,要解决内部单双数背景颜色不一样
 * 2,将要编辑的表格中加一个文本框
 * 3,将文本框覆盖要编辑的表格，还要将原来表格中的值保存下来，并放到文本框中去
 * 4,通过键盘来控制，实现Esc功能
 */

// $(callback)是$(document).ready()的简写。
$(function(){
	//找到表格的内容区域中所有的奇数行
	$("tbody>tr:even").css("background-color","#ECE9D8");
	//接下来就是要找到有学好的表格
	var numTd = $("tr>td:even");
	numTd.click(function(){
		//找到当前鼠标点击的td,this对应的就是响应了click的那个td
		var tdobj = $(this);
		//要是td中有子节点input，就return false，不执行click处理
		if(tdobj.children("input").length>0){
			return false;
		}
		//获取选择的td的值
		var tdtext = tdobj.html();
		//然后再清空td中的内容
		tdobj.html("");
		//创建一个文本框
		var inputobj = $("<input type='text'>");
		//将创建的文本框加到td中去
		inputobj.appendTo(tdobj);
		//将文本框的长度设置为td的长度
		inputobj.width(tdobj.width());
		//将文本框的边框去掉
		inputobj.css("border-width","0");
		//将文本框的背景颜色设置和td的一样
		inputobj.css("background-color",tdobj.css("background-color"));
		//将td中的值放到input中去
		//inputobj.text(tdtext);
		inputobj.val(tdtext);
		//将input中的字体设置和原来的一样
		inputobj.css("font-size","16px");
		//设置文本框插入之后就被选中
		inputobj.trigger("focus").trigger("select");
		//防止事件传播
		inputobj.click(function() {
			return false;
		});
		//处理文本框上回车和esc按键的操作
		inputobj.keyup(function(event){
			//获取当前按下键盘的键值
			var keycode = event.which;
			//处理回车键
			if(keycode == 13){
				//获取当当前文本框中的内容
				var inputvalue = $(this).val();
				//tdobj.text(inputvalue);
				//tdobj.html(inputvalue);
				tdobj.val(inputvalue);
			}
			//处理esc按键
			if(keycode == 27){
				//将td中的内容还原成text
				tdobj.html(tdtext);
			}
		});
	});
});

CSS代码

@CHARSET "UTF-8";
table{
	border: 1px solid black;
	/*修正单元格之间的边框不能合并*/
	border-collapse: collapse;
	width: 400px;
}
table th {
	border: 1px solid black;
	width: 50%;
}
table td {
	border: 1px solid black;
	width: 50%;
}
tbody th {
	background-color: #A3BAE9;  
}