Hiding a row in the table using class

Question

I have multiples of 2 rows in my table as below. I wanted to hide 2nd row pattern everywhere in my table on page load.

I tried to hide using class "a-IRR-header" but it hides both the rows since it is a common class for both the rows.

<tr>
  <th colspan="4" class="a-IRR-header a-IRR-header--group" id="B139078761545827132_1">Basis</th>
</tr>
<tr>
  <th class="a-IRR-header" id="C139079212590827137"><a  data-column="139079212590827137" href="#">Sl</a></th>
  <th class="a-IRR-header" id="C139078981375827134"><a  data-column="139078981375827134" href="#">Question</a></th>
  <th class="a-IRR-header" id="C139079056068827135"><a  data-column="139079056068827135" href="#">Answer</a></th>
</tr>

Answer 1

First of all i think you should review the syntax of your classes, too many capitalized letters (this is a personal opinion but it will help you).

I don't really understand what you're trying to do but you can use the CSS selector :

table tr:nth-child(2) {
    display: none;
}

If you really need to hide it on load you can use something's like :

$(document).ready(function() {
    $( "table tr:nth-child(2)").css('display', 'none');
})

Answer 2

$(document).ready(function() {
    $('.a-IRR-header').eq(1).hide()
});

table tr:nth-child(2) {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1">
    <tr>
        <th colspan="4" class="a-IRR-header a-IRR-header--group" id="B139078761545827132_1">Basis</th>
    </tr>
    <tr>
        <th class="a-IRR-header" id="C139079212590827137"><a class="a-IRR-headerLink" data-column="139079212590827137" href="#">Sl</a></th>
        <th class="a-IRR-header" id="C139078981375827134"><a class="a-IRR-headerLink" data-column="139078981375827134" href="#">Question</a></th>
        <th class="a-IRR-header" id="C139079056068827135"><a class="a-IRR-headerLink" data-column="139079056068827135" href="#">Answer</a></th>
    </tr>
</table>

Answer 3

You can do like this:

$(document).ready(function(){
    $('tr:eq(1)').hide();
});

All tr with 3 th and not with the class a-IRR-header--group cuz there are tr tags with 3 th with other class which i dont want to disturb:

$.each('tr').function({
    if($(this).find('th').not('.a-IRR-header').length == 3)
    {
        $(this).parents('tr:first').hide();
    }
});

Answer 4

You can achieve this by using ccs nth-child() like:

table tr:nth-child(2) {
    background: #ccc;
}

Ex:

table tr:nth-child(2) {
    background: #ccc;
}

<table width="100%" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <!--
  <tr>
    <td>&nbsp;</td>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>$</td>
    <td>&nbsp;</td>
  </tr>
  -->
</table>