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。


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

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

jsp 显示table一列的值

无标题页 .title {background-color:Black; color:White; text-align:center; cursor:pointer} ...

固定表格table的某一列

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

Response.Write Table 方式导出Excel 添加样式

在asp.net中导出Excel常用  Response.Write  Table 的方式导出Excel 但是导出的报表样式可能不符合要求 ,比如说 表格边框 Table的边框宽度最小只能是 ...

前台table样式

经典使用的table样式

普通table表格样式大全

普通table表格样式及代码大全(全) 普通table表格样式及代码大全(全)(一) 单实线边框表格 单实线边框表格 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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