Use jQuery Sibling to find top in HTML table

Question

I have an HTML table that has many hidden columns. You can think of the columns as sets of 3. The first two are hidden and the 3rd is viewable. When you mouseover the 3rd, the first 2 in the set of 3 become viewable also. I am trying to figure out how to select the top 2 in the column where the mouseover is happening so I can use jQuery to change the html to add colspan='3' to both so that they span across all 3 columns of the "set".

For example: Mousing Over any part of the 1st yellow column makes the 2 columns that were hidden before that column now viewable. "1000017" and "Potato Chips" would be what need selected so that I can then change their column span to 3 so they correctly cover the columns again. My current code does not work correctly though and selects the whole "Item name" row instead.

My question is: How can I fix my this.siblings jQuery line so that it only selects the appropriate instead of the whole row.

Please see snippet below:

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function(){
    $('td',this).slice(sel-3,sel-1).toggleClass('hidetd');
    $(this).siblings().first().toggleClass('light');
  })
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}

.hidetd {
    display:none;  
}

.light {
  background: red;
}



  
    Item #
    100017
    100018
    100019
    100020
  
  
    Component
    Potato chips
    
    butterfingers
    
    Flat Pretzels
    
    Milk Chocolate
    
  
  
    2016-01-03
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-04
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-05
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-06
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-07
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0

Here is how everything looks if no columns were hidden and all headings span="3" covering the correct columns.

.yellowbr {
  background-color: yellow;
}

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
       
}


  
    Item #
    100017
    100018
    100019
    100020
  
  
    Component
    Potato chips
    butterfingers
    Flat Pretzels
    Milk Chocolate
  
  
    2016-01-03
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-04
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-05
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-06
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-07
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0

Linek · Accepted Answer

Is this what you are looking for?

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function() {
    $('th', this).slice(sel / 3, sel / 3 + 1).attr('colspan', 3);
    $('th', this).filter(function(i) {
      return i !== sel / 3;
    }).attr('colspan', 1);

    var cellsToHightlight = $('td', this).slice(sel - 3, sel - 1);
    for (var i = 0; i < cellsToHightlight.length; i += 1) {
      var cell = $(cellsToHightlight[i]);
      if (cell.hasClass('hidetd')) {
        cell.removeClass('hidetd');
      }
    }

    $('td', this).filter(function(i, el) {
      return (i < sel - 3 || i > sel - 1) && (i + 1) % 3 !== 0;
    }).addClass('hidetd');

    $(this).siblings().first().toggleClass('light');
  });
});

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.hidetd {
  display: none;
}
.light {
  background: red;
}



  
    Item #
    100017
    100018
    100019
    100020
  
  
    Component
    Potato chips
    
    butterfingers
    
    Flat Pretzels
    
    Milk Chocolate
    
  
  
    2016-01-03
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-04
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-05
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-06
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
  
  
    2016-01-07
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0
    0

Use jQuery Sibling to find top <th> in HTML table

Answers (1)

Related Questions

Use jQuery Sibling to find top &lt;th&gt; in HTML table

Answers (1)

Related Questions

Use jQuery Sibling to find top <th> in HTML table