Using jQuery Check if table th has an attribute value

Question

I am trying to display content on the window resize and load. After that clicking table th attribute is equal to the given value. I don't know where I am doing wrong but I am unable to get the result.

$(window).on("load resize", function(e) {
  var $theWindowSize = $(this).width();
  if ($theWindowSize < 768) {
    alert($theWindowSize);
    if ($('table th').attr('id') == 'basic-tab') {
      $('table th#basic-tab').on('click', function(e) {
        alert('basic');
        $('table .basic-content').css('display', 'block');
      });
    } else if ($('table th').attr('id') == 'standard-tab') {
      $('table th#standard-tab').on('click', function(e) {
        alert('standard');
        $('table .standard-content').css('display', 'block');
      });
    }
  }
});

.basic-content,
.standard-content {
  dispaly: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th id="basic-tab">Tab1</th>
    <th id="standard-tab">Tab2</th>
  </tr>
  <tr class="basic-content">
    <td>Basic Content</td>
  </tr>
  <tr class="standard-content">
    <td>Standard Content</td>
  </tr>
</table>

Answer 1

On click of th get the id, split it and get first part, and then check which tr contain class started from this string and contain content as well. Apply CSS on that

Working snippet:-

$('table th').on('click',function(e){
  var thId = $(this).attr('id');
  var compare = thId.split('-')[0];
  $('tr').each(function(){
      if($(this).attr('class') != undefined){
        $(this).css('display','none');
      }
  });
  $('tr[class*='+compare+'-content]').css('display','block');
});

.basic-content,.standard-content{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th id="basic-tab">Tab1</th>
    <th id="standard-tab">Tab2</th>
  </tr>
  <tr class="basic-content">
    <td>Basic Content</td>
  </tr>
  <tr class="standard-content">
    <td>Standard Content</td>
   </tr>
</table>

Note:- Added content in code $('tr[class*='+compare+'-content]') as per your HTML. if you need to add CSS to all who contains basic or standered in there class then remove content from code and make it $('tr[class*='+compare+'-]').

Answer 2

$(".th") is returning only first element so let's try seperately:

$(".th").eq(n) 

$(window).on("load resize", function(e) {
  var $theWindowSize = $(this).width();
  if ($theWindowSize < 768) {
    alert($theWindowSize);
    if ($('table th').eq(0).attr('id') === 'basic-tab') {
      $("body").on('click','table th#basic-tab', function(e) {
        alert('basic');
        $('table .basic-content').css('display', 'block');
      });
    } if ($('table th').eq(1).attr('id') === 'standard-tab') {
      $('body').on('click','table th#standard-tab',function(e) {
        alert('standard');
        $('table .standard-content').css('display', 'block');
      });
    }
  }
});

.basic-content,
.standard-content {
  dispaly: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th id="basic-tab">
      Tab1
    </th>
    <th id="standard-tab">
      Tab2
    </th>
  </tr><tr>
  <div class="basic-content">
    <td>Basic Content</td></div>
      <div class="standard-content">
        <td>Standard Content</td>
        </div>
    </tr>
</table>