table单击一列改变样式

最新推荐文章于 2021-06-20 20:59:27 发布

小明code

最新推荐文章于 2021-06-20 20:59:27 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： table 选择一列

本文链接：https://blog.youkuaiyun.com/h4x0r_007/article/details/33323613

web前端专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了如何在表格中实现单击某一列时改变该列的样式。首先阐述了需求，接着详细讲解了实现这一功能的思路，最后通过具体步骤展示了实际操作过程。

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

一、需求：

table中单击一列，改变该列的颜色，且原来已经改变过颜色的列恢复原状。

二、思路：

对table中th、td增加onclick方法，获取该列的columnIndex，循环操作每一行（tr）列号为columnIndex元素，改变其style。这里的循环用jquery选择器来操作，非常方便。

三、具体实现：

下面是一个demo。

<!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" />
<title>JavaScript单击table改变某一列的样式</title>
	<script id="jquery_183" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
	
<script type="text/javascript">
	var selectedColumn;
 function changeColumnStyle(cell){
		var index = cell.cellIndex;
	 if (typeof selectedColumn != "undefined") {//selectedColumn
		 $('#mytable tr').find(('th')).css({color:''});
		 $('#mytable tr').find(('td')).css({color:''});
	 }
	 selectedColumn = cell;
	 	 
	 $('#mytable tr').find('th:eq(\''+index+'\')').css({color:'red'});	 
	 $('#mytable tr').find('td:eq(\''+index+'\')').css({color:'red'});	 
	  

 }  
</script>
	
	
	
</head>
<body style="width:100%; height:100%;">
<table id="mytable" border="1" width="37%">
	<thead>
	<tr>
		<th width="63" onclick="changeColumnStyle(this)">11</th>
		<th width="68" onclick="changeColumnStyle(this)">12</th>
		<th width="62" onclick="changeColumnStyle(this)">13</th>
		<th width="75" onclick="changeColumnStyle(this)">14</th>
	</tr>
	</thead>
	<tbody>
		<tr>
		<td width="63" onclick="changeColumnStyle(this)">21</td>
		<td width="68" onclick="changeColumnStyle(this)">22</td>
		<td width="62" onclick="changeColumnStyle(this)">23</td>
		<td width="75" onclick="changeColumnStyle(this)">24</td>
	</tr>
	<tr>
		<td width="63" onclick="changeColumnStyle(this)">21</td>
		<td width="68" onclick="changeColumnStyle(this)">22</td>
		<td width="62" onclick="changeColumnStyle(this)">23</td>
		<td width="75" onclick="changeColumnStyle(this)">24</td>
	</tr>
	</tbody>
</table>
</body>
</html>