Brandon Brandon - 18 days ago 4
CSS Question

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

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

<th>
in the column where the mouseover is happening so I can use jQuery to change the html to add
colspan='3'
to both
<th>
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
<th>
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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Item #</th>
<th>100017</th>
<th>100018</th>
<th>100019</th>
<th>100020</th>
</tr>
<tr>
<th>Component</th>
<th><u>Potato chips</u>
</th>
<th><u>butterfingers</u>
</th>
<th><u>Flat Pretzels</u>
</th>
<th><u>Milk Chocolate</u>
</th>
</tr>
<tr>
<th>2016-01-03</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-04</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-05</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-06</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-07</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
</table>





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;

}

<table>
<tr>
<th>Item #</th>
<th colspan="3">100017</th>
<th colspan="3">100018</th>
<th colspan="3">100019</th>
<th colspan="3">100020</th>
</tr>
<tr>
<th>Component</th>
<th colspan="3"><u>Potato chips</u></th>
<th colspan="3"><u>butterfingers</u></th>
<th colspan="3"><u>Flat Pretzels</u></th>
<th colspan="3"><u>Milk Chocolate</u></th>
</tr>
<tr>
<th>2016-01-03</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-04</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-05</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-06</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
<tr>
<th>2016-01-07</th>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
<td class='hidetd'>0</td>
<td class='hidetd'>0</td>
<td class='yellowbr'>0</td>
</tr>
</table>




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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>100017</th>
    <th>100018</th>
    <th>100019</th>
    <th>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th><u>Potato chips</u>
    </th>
    <th><u>butterfingers</u>
    </th>
    <th><u>Flat Pretzels</u>
    </th>
    <th><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>