wuyan148
2010-07-02 15:17
浏览 506
已采纳

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

近期学习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


  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • myali88 2010-07-02 16:44
    已采纳

    你可以采用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]

    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题