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>

i think you need to do :- $('table .content').css('display','block'); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Dec 3, 2019 at 6:30
please read the question and understand properly what is required @User863 — Praveen
– Praveen, Commented Dec 3, 2019 at 6:37

Death-is-the-real-truth · Accepted Answer · 2019-12-04 04:39:17Z

3

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

edited Dec 4, 2019 at 4:39

answered Dec 3, 2019 at 6:39

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Praveen Over a year ago

Awsome Thank you so much!

Ritesh Khandekar · Accepted Answer · 2019-12-03 08:24:54Z

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

Collectives™ on Stack Overflow

Using jQuery Check if table th has an attribute value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related