CODEWITHSUNDEEP
jqueryhtmlcss
Praveen
Praveen

Reputation: 1005

Using jQuery Check if table th has an attribute value

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>

Upvotes: 3

Views: 1795

Answers (2)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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+'-]').

Upvotes: 3

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

$(".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>

Upvotes: 1

Related Questions