突出显示表格中的行和列

Question

I want to highlight row and column in a table but not all of them, just until end of selected one td. I'll put a link here to prove what i want, go down and where is size table (size chart) hover on it and you will see:

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

How can I highlight with limit like that?

Here is my table: https://jsfiddle.net/pkkbf9k2/

Answer 1

I think that's it: 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

Here is a similar CSS tutorial. It will give you a more better idea.
https://css-tricks.com/simple-css-row-column-highlighting/

Hope this helps you.

Answer 3

这是使用jQuery高亮显示行的示例链接http://www.mkyong.com/jquery/how-to-highlight-table-row-record-on-hover-with-jquery/

Answer 4

You can give the bgcolor to the tag which you wanted to highlight. <td bgcolor="#FF0000">Content</td>

Or You can give class also to the tag which you want to highlight. example <td class="highlight">Content</td> and give the background color to the style.css file.