Question

我想突出显示表中的行和列，但不是所有这些，直到选定的一个td结束。我会在这里放一个链接来证明我想要的东西，然后往下走，尺寸表（尺寸表）悬停在它上面你会看到：

http://www.nike.com/ro/en_gb/c/size-fit-guide/mens-shoe-sizing-chart

如何突出这样的限制？

这是我的表：https://jsfiddle.net/pkkbf9k2/

Answer 1

我认为就是这样： https://jsfiddle.net/8odoros/pkkbf9k2/4/

  $( "td" ).hover(
  function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index()+1;
    $('tr:nth-child('+myRow+') td:lt('+myCol+')').addClass( "hover" );
    myCol++; myRow--;
    $('table tbody td:nth-child('+myCol+')').each(function (index) {
        if(index<myRow)  $(this).addClass( "hover" );
    });
    $(this).addClass('hoverBold');
  }, function() {
    $( '*' ).removeClass( "hover" );
    $(this).removeClass('hoverBold');
  }
);

Answer 2

这是一个类似的CSS教程。它会给你一个更好的主意。
https://css-tricks.com/simple-css-row-column-highlighting/

希望这会对你有所帮助。

Answer 3

此处使用jquery突出显示行的示例链接 http://www.mkyong.com/jquery/how-to-highlight-table-row-record-on-hover-with-jquery/

Answer 4

您可以将bgcolor提供给要突出显示的标记。 <td bgcolor="#FF0000">Content</td>

或者您也可以将类提供给要突出显示的标记。例 <td class="highlight">Content</td> 并为style.css文件提供背景颜色。

突出显示表

4 个答案: