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。


html+css 单独给某一表格定义样式

.title {  font-size:28px;  font-weight:bold; } table.ss {  border:1px solid #000;  border-s...

jdk8 list排序

//按照开始时间排序 Collections.sort(productPrices, new Comparator() { public int compare(ProductPrice ar...

js判断输入框的值是否为空

JS判断输入框的值是否为空 var

超好看的table样式格行换色加单击事件

各行换色+单击表格行变色 css"> #ejiaA1 { width: 550px; border-top: #E3E3E3 1px solid; border-left: #E3E3E...

jquery table表格 获取选中的某一行和某一列的值

选择 驾校名称 合作驾校名称...

bootstrap 点击table中某一列,弹出模态框

(一)bootstrap-table中测量值太长了,显示不美观,为了显示美观,把测量值大于20个字,让其显示详情,鼠标悬浮到这个值 时候,出现悬浮框。 原页面效果: 代码实现: (1)后台返...

固定表格table的某一列

固定表格table的某一列,其它列随着滚动条滚动。 TableID:我们要设置固定列的table的id, FixColumnNumber你要使table的哪一列固定的列序号, width:table...

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

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

JavaScript实现获取table中某一列的值

1、实现源码 JavaScript实现获取table中某一列的值 function getTdValue() { var tableId = document.getEle...

JavaScript获取table中某一列的值的方法

1、实现源码 复制代码 代码如下: JavaScript实现获取table中某一列的值 function getTdValue() { var...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:table单击一列改变样式
举报原因:
原因补充:

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