table单击一列改变样式

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

小明code

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

阅读量3.4k

点赞数

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

本文链接：https://blog.csdn.net/h4x0r_007/article/details/33323613

版权

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

摘要由CSDN通过智能技术生成

一、需求：

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 sel