table单击一列改变样式

原创 2014年06月22日 15:27:04

一、需求:

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>

这里面有几个知识点:
1、如何获取table中单击某一列的列号?
对td增加onclick方法,方法中的this传递dom对象的正好是td(th),td本身有cellIndex指明其列索引号。

2、如何用jquery选择整个table中的某一列,包括th、td?
$('#tableId tr').find('td:eq(columnIndex)');
columnIndex是参数需要转义,直接是数字则不需要。这里还曾犯了一个错误:$('td:eq(2)').css({color:'red'}); $('td:eq(4)').css({color:'red'});  

这样选中的实际上是第2行3列和3行第一列, 这里的td:eq里面的参数实际上不是列号columnIndex,而是表中所有td的索引号从1-N。


jQuery 点击table一行 并对当前行的某一列进行修改

三种:table行列中只有数据,嵌入input/select/等标签,级联修改最后一列数据当前行当前列中只有数据jswindow.onload=function(){ //焦点离开事件 //也可以是c...
  • qq_26906345
  • qq_26906345
  • 2016-05-15 00:54:44
  • 11296

如何实现table中,点击某行,选中某行,改变其背景色

1、首先,现在你的文件中导入 jquery.js 文件 2、在中添加如下代码 $("#table1 tr").click(function(){        document.getEleme...
  • u012431404
  • u012431404
  • 2015-08-19 08:33:34
  • 9140

[HTML]table选中行效果

比如是这样一个结构的table 序号 帐号 密码 ...
  • qq807081817
  • qq807081817
  • 2015-05-04 11:15:05
  • 5401

如何给bootstrap table设置行列单元格样式

1、根据单元格或者行内其他单元格的内容,给该单元格设置一定的css样式 columns: [{ field: 'index', title: '序号', align:"center", for...
  • uncle_yiba
  • uncle_yiba
  • 2017-08-16 11:12:54
  • 6720

修改 bootstrap table 默认detailRow样式

this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () { v...
  • sinat_36065456
  • sinat_36065456
  • 2017-07-20 19:39:01
  • 915

TP5 修改数据

setField 更新某字段的值  1 $User = M("User"); // 实例化User对象// 更改用户的name值$User-> where('id=5')->setFiel...
  • haibo0668
  • haibo0668
  • 2017-09-27 15:21:01
  • 5904

jquery根据table某一格的内容修改整行的css

table部分内容如下:             进度                   未开始     进行中     已完成            ...
  • yytoo2
  • yytoo2
  • 2017-06-06 15:32:38
  • 398

灵活设置表格的某一列颜色

最近正在复习关于HTML的视频,以前觉得自己对HTML中的表格问题领悟很深,今天突然学到新的知识,深感惭愧。有时候在做报表的时候,想要设置某一列的颜色,如果当表格的列数或者行数不多时,可以一一设置,但...
  • hudie_1993
  • hudie_1993
  • 2016-12-28 21:53:16
  • 1029

layui分页组件layPage动态调整总页数

我的小工程的前端使用了layui,这也是当时临时上网查到的一个框架,感觉风格简约,而且据称对后端开发人员很友好. 在使用layui的过程中,我遇到了一些问题,在这里将几个个人感觉比较棘手的问题列举一...
  • lqadam
  • lqadam
  • 2017-05-13 20:29:09
  • 7985

layui栅格系统

首先,它是一种响应式的栅格系统,简单说就是支持多种设备,会自行改变行宽高。 栅格的使用不需要JS引入,单纯的class样式声明。 首先定义好页面框架:其次layui定义的栅格为12等分,就是说一行...
  • u011554976
  • u011554976
  • 2017-10-19 08:58:10
  • 1160
收藏助手
不良信息举报
您举报文章:table单击一列改变样式
举报原因:
原因补充:

(最多只允许输入30个字)