如何用JQuery，实现表格列变色

Question

近期学习JQuery中完成如下代码：【希望在此集成上 实现“列”变色，最终效果是：当鼠标经过某个td时，td所在行和所在列变灰色，同时经过的td变红色。关键：不知道如何取得同列上的其他td!】

body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; background: #E6EAE9; } #mytable { width: 700px; padding: 0; margin: 0; text-align : center ; } .table-heading{ font-family : Georgia, serif; font-size : 18px ; color : blue ; background-color : yellow ; } .odd{ background-color : #ffc; /*奇数行浅黄*/ } .even{ background-color : #cef ;/*偶数行浅蓝*/ } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; font-size:11px; padding: 6px 6px 6px 12px; color: #4f6b72; } .tdhlight{ color : red ; font-weight : 900 ; } .rc-hlight{ background-color : #cc99ff ;} .foucs-hlight{ background-color : #ff6600 ;} .hidden{ display : none ;} $(document).ready( function(){ // $('tr:odd').addClass('odd'); // $('tr:even').addClass('even'); $('th').parent().addClass('table-heading'); // $('tr:not([th]):even').addClass('even'); // $('tr:not([th]):odd').addClass('odd'); $('tr:not(:has(th)):odd').addClass('odd'); $('tr:not(:has(th)):even').addClass('even'); $('td:contains("showtime")').siblings().addClass('tdhlight'); } ); $(document).ready( function(){ $('#mytable td').hover( function(){ $(this).parent().addClass('rc-hlight'); $(this).addClass('foucs-hlight'); }, function(){ $(this).parent().removeClass('rc-hlight'); $(this).removeClass('foucs-hlight'); } ); } );

name	age	id	sex
shiyang	18	001	female
showtime	23	002	male
wuyan	19	003	male
huanlili	89	004	female
nanci	48	005	female

Answer 1

你可以采用colgroup标签或者找出和td同列的所有td设置相同背景色。下面我用colgroup做的：
[code="html"]

body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; background: #E6EAE9; } #mytable { width: 700px; padding: 0; margin: 0; text-align : center ; } .table-heading{ font-family : Georgia, serif; font-size : 18px ; color : blue ; background-color : yellow ; } .odd{ background-color : #ffc; /*奇数行浅黄*/ } .even{ background-color : #cef ;/*偶数行浅蓝*/ } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; font-size:11px; padding: 6px 6px 6px 12px; color: #4f6b72; } .tdhlight{ color : red ; font-weight : 900 ; } .rc-hlight{ background-color : #cc99ff ;} .foucs-hlight{ background-color : #ff6600 ;} .hidden{ display : none ;} .column{ width : 500px ; background-color : #123 } /** *这里我注释了，因为你在td设置的背景色会覆盖col上的背景色。 $(document).ready( function(){ // $('tr:odd').addClass('odd'); // $('tr:even').addClass('even'); $('th').parent().addClass('table-heading'); // $('tr:not([th]):even').addClass('even'); // $('tr:not([th]):odd').addClass('odd'); $('tr:not(:has(th)):odd').addClass('odd'); $('tr:not(:has(th)):even').addClass('even'); $('td:contains("showtime")').siblings().addClass('tdhlight'); } ); **/ $(document).ready( function(){ $('#mytable td').hover( function(){ //这里也提取了变量，如果同一对象多次访问，我们最后用设定变量，这样可以提高JS效率 var td = $(this) , tr = td.parent(); tr.addClass('rc-hlight'); //td.addClass('foucs-hlight'); var nu = tr.children("td").index(td[0]); console.info(nu) $("#col_" + nu).addClass("column"); }, function(){ var td = $(this) , tr = td.parent(); tr.removeClass('rc-hlight'); //td.removeClass('foucs-hlight'); var nu = tr.children("td").index(td[0]); $("#col_" + nu).removeClass("column"); } ); } );

name	age	id	sex
shiyang	18	001	female
showtime	23	002	male
wuyan	19	003	male
huanlili	89	004	female
nanci	48	005	female

[/code]