用jquery+css制作可编辑表格

最新推荐文章于 2022-03-26 18:28:19 发布

zjx102938

最新推荐文章于 2022-03-26 18:28:19 发布

阅读量473

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zjx102938/article/details/8856022

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一种可编辑的表格样式，可用HTML的TABLE随意拓展。写了两天才写出来，可以给用户在操作表格数据时带来良好的体验。

普通的可编辑表格：

用jquery+css优化过的表格：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.backgroudColorFocus {
	background-color: #FCFC8A;
}
.backgroudColorMouseover {
	background-color: #FCFC8A;
}
.borderColor {
	border:  1px solid #FCFC8A;
}
.noneBorder {
	border:none;
}
.grooveBorder {
	border:  1px groove #FCFC8A;
}
.tableEditText {
	line-height:1em;
	overflow-x:hidden;
	overflow-y:visible;
	font-weight: normal;
	font-size: 12px;    
}
.tableEditTd {
	height: 25px;	
	border: 1px solid #dce2e4;
	font-size: 12px;
	padding:0em;
	margin:0em;
	font-weight: normal;
	text-align: left;
}
.tableEdit {
	width:100%;	
	background-color:#FFFFFF;
	padding:0em;
	margin:0em;
	border-collapse:collapse;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<title>用jquery+css制作可编表格</title>
</head>
<body>
	<table>	
		<tr>
		  <td style="width:25%;"><input type="text" value="序号"/></td>
		  <td style="width:25%;"><input type="text" value="登录帐号"/></td>
		  <td style="width:25%;"><input type="text" value="人员姓名"/></td>
		  <td style="width:25%;"><input type="text" value="登录时间"/></td>
		</tr>          
		  <tr>
			<td><input type="text" value="1"/></td>
			<td><input type="text" value="zhangsan"/></td>
			<td><input type="text" value="张三"/></td>
			<td><input type="text" value="2012-10-26 09:23:56 "/></td>
		  </tr>
		  <tr>
			<td><input type="text" value="2"/></td>
			<td><input type="text" value="lisi"/></td>
			<td><input type="text" value="李四"/></td>
			<td><input type="text" value="2012-10-26 09:23:56"/></td>
		  </tr>
		  <tr>
			<td><input type="text" value="3"/></td>
			<td><input type="text" value="wangwu"/></td>
			<td><input type="text" value="王五"/></td>
			<td><input type="text" value="2012-10-26 09:23:56"/> </td>
		  </tr>
		  <tr>
			<td><input type="text" value="4"/></td>
			<td><input type="text" value="zhaoliu"/></td>
			<td><input type="text" value="赵六"/></td>
			<td><input type="text" value="2012-10-26 09:23:56"/></td>
		  </tr>
		   <tr>
			<td><input type="text" value="5"/></td>
			<td><input type="text" value="chengqi"/></td>
			<td><input type="text" value="陈七"/></td>
			<td><input type="text" value="2012-10-26 09:23:56 "/></td>
		  </tr>
		   <tr>
			<td><input type="text" value="6"/></td>
			<td><input type="text" value="liuba"/></td>
			<td><input type="text" value="刘八"/></td>
			<td><input type="text" value="2012-10-26 09:23:56 "/></td>
		  </tr>
		</table>
</body>
<script type="text/javascript">
	/**
	 * 可编辑表格样式
	 */	
	$(function(){
		//可编辑表格样式
		$("table").addClass("tableEdit");
		//可编辑单元格样式
		$("td").addClass("tableEditTd");
		//可编辑文本框样式
		$("input[type='text'],textarea").addClass("tableEditText").addClass("noneBorder");
		//自动扩展文本框高宽充满单元格
		var lengthArr=new Array();
		var heightArr=new Array();
		$("td").each(function(){
			lengthArr.push($(this).width());
			heightArr.push($(this).height());
		});
		$("td").each(function(i){
			$(this).find("input[type='text'],textarea").css("width",lengthArr[i]-3).css("height",heightArr[i]-3);
		});	
		//处理鼠标移动和获取焦点事件					
		var currentFocus = null;
		$("input[type='text'],textarea").mousemove(function(){
			if(this!=currentFocus){         
				$(this).addClass("backgroudColorMouseover");
				$(this).parent().addClass("backgroudColorMouseover");				
			}      
		}).mouseout(function(){
			if(this!=currentFocus){ 	       
				$(this).removeClass("backgroudColorMouseover");
				$(this).parent().removeClass("backgroudColorMouseover");	   
			}
		}).focus(function(){       
			$(this).removeClass("backgroudColorMouseover").removeClass("noneBorder");      
			$(this).addClass("grooveBorder");
			currentFocus = this;
		}).blur(function(){
			$(this).parent().removeClass("backgroudColorMouseover");	       
			$(this).removeClass("grooveBorder").addClass("noneBorder");
			currentFocus = null;
		});	
	});
</script>
</html>