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

如何用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]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥15 state显示变量是字符串形式,但是仍然红色,无法引用,并显示类型不匹配
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗