admin管理员组

文章数量:1429623

I have a below html tags which is feeding the data from database and display as table in html

 <html>
  <body>
   <div>
    <button type="button" class="button">DATA_1</button>
     <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_2</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_3</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
     </table> 
    </div>
   </body>
 </html>

I have the below script which is going to hide all table by default

  $(document).ready(function(){
     $('.data_table').hide();
  });

Also the button and table were generated automatically, and its pletely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.

I tried below script to show the respective data which is not working as expected:

   $(document).ready(function(){
      $('.button').on('click', function(){
      $('.data_table').show();
     });
   });

The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.

Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:

  <html>
      <body>
        <div id="tab">
          <div>
            <button type="button" class="button">DATA_1</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>XXX</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
           </div>
          <div>
            <button type="button" class="button">DATA_2</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>AAA</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
          <div>
            <button type="button" class="button">DATA_3</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>BBB</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
        </div>
       </body>
     </html>

Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.

I have a below html tags which is feeding the data from database and display as table in html

 <html>
  <body>
   <div>
    <button type="button" class="button">DATA_1</button>
     <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_2</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_3</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
     </table> 
    </div>
   </body>
 </html>

I have the below script which is going to hide all table by default

  $(document).ready(function(){
     $('.data_table').hide();
  });

Also the button and table were generated automatically, and its pletely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.

I tried below script to show the respective data which is not working as expected:

   $(document).ready(function(){
      $('.button').on('click', function(){
      $('.data_table').show();
     });
   });

The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.

Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:

  <html>
      <body>
        <div id="tab">
          <div>
            <button type="button" class="button">DATA_1</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>XXX</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
           </div>
          <div>
            <button type="button" class="button">DATA_2</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>AAA</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
          <div>
            <button type="button" class="button">DATA_3</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>BBB</th>
             </tr>
             <tr>
             <td>YYY</td>
             </tr>
             </table>
          </div>
        </div>
       </body>
     </html>

Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.

  • javascript
  • jquery
  • html
Share Improve this question edited Nov 28, 2017 at 11:48 ArrchanaMohan asked Nov 21, 2017 at 7:06 ArrchanaMohanArrchanaMohan 2,5767 gold badges45 silver badges94 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

You need to use $(this).next(). If you use $('.data_table'), it will show() all tables having that as a class. Hence, you need to use $(this).next()

$(document).ready(function() {
  $('.data_table').hide();
  $('.button').on('click', function() {
    if ($(this).parent().next().find('table.data_table').is(":visible")) {
      $(this).parent().next().find('table.data_table').hide();
    } else {
      $('.data_table').hide();
      $(this).parent().next().find('table.data_table').show();
    }
  });
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tab">
  <div>
    <button type="button" class="button">DATA_1</button>
  </div>
  <div class="logtitude">
    <table class="data_table">
      <tr>
        <th>XXX</th>
      </tr>
      <tr>
        <td>YYY</td>
      </tr>
    </table>
  </div>
  <div>
    <button type="button" class="button">DATA_1</button>
  </div>
  <div class="logtitude">
    <table class="data_table">
      <tr>
        <th>AAA</th>
      </tr>
      <tr>
        <td>YYY</td>
      </tr>
    </table>
  </div>
  <div>
    <button type="button" class="button">DATA_1</button>
  </div>
  <div class="logtitude">
    <table class="data_table">
      <tr>
        <th>BBB</th>
      </tr>
      <tr>
        <td>YYY</td>
      </tr>
    </table>
  </div>
</div>

you should write like this:

$('.button').on('click', function(){
    $(this).next().show().siblings('.data_table').hide();
});

You have to hide all tables first: $('.data_table').hide(); and you have to do it again after each button click.

Make the table next to the clicked button visible: $(this).next('.data_table').show(); 

$(document).ready(function(){
  /* hide all tables initially */
  $('.data_table').hide();
  $('.button').on('click', function(){
    /*on click hide all tables again */
    $('.data_table').hide();
    /* show table next to the clicked button */
    $(this).next('.data_table').show();
  });
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
   <div>
    <button type="button" class="button">DATA_1</button>
     <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_2</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
    </table>
   <button type="button" class="button">DATA_3</button>
    <table class="data_table">
      <tr>
      <th>XXX</th>
      </tr>
      <tr>
      <td>YYY</td>
      </tr>
     </table> 
    </div>
   </body>
 </html>

本文标签： javascriptHow to display only clicked element in HTML using JQUERYStack Overflow

版权声明：本文标题：javascript - How to display only clicked element in HTML using JQUERY - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745549464a2662865.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。