CODEWITHSUNDEEP
javascriptjqueryhtmlcss
J.Nick
J.Nick

Reputation: 205

How to select next element to the current

My goal is to make an expand button show inner table which starts from tr tag. I have tried to do it using JQuery like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $('.partTableContent').hide();
        $('.expandButton').click(function(){
            // .parent() selects the A tag, .next() selects the P tag
            $(this).parent().next().slideToggle(200);
        });
    });
</script>

The table I use

    <table class="partsTable" border="1px">
    <tr>
        <td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
        <td class="sideForPartsTable">Title + sum1 + sum2</td>
        <td class="sideForPartsTable" width="5%">edit</td>
        <td class="sideForPartsTable" width="5%">remove</td>
    </tr>
    <tr>
        <table class="partTableContent">
            <tr>
                <td> Test1 </td>
            </tr>
            <tr>
                <td> Test2 </td>
            </tr>
        </table>
    </tr>
</table>

But it doesn't work the way it's expected. I understand that JQuery 'slideToggles' only next td tag inside this table. I also have tried something like this

$(document).ready(function(){
    $('.partTableContent').hide();
    $('.expandButton').click(function(){
        // .parent() selects the A tag, .next() selects the P tag
        $(this).parent().nextAll('table:first').slideToggle(200);
    });
});

But it doesn't work too :c

Please consider that I have many "partsTable" and my goal is to make it work for all of them to expand ONLY corresponding sub-table.Thanks in advance

Upvotes: 0

Views: 84

Answers (3)

Muhammet Enginar
Muhammet Enginar

Reputation: 516

I see that you are hiding table element with the class name of 'partTableContent'. Which is actually child of <tr> element you get with calling $(this).parent().next()

$(document).ready(function() { 
$('.partTableContent').hide(); 
$('.expandButton').click(function() {  
  $(this).parent().parent().next().children().children('.partTableContent').slideToggle(200); }); 
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="partsTable">

  <tr>

    <td class="sideForPartsTable" width="5%">
      <button class="expandButton">Expand button</button>
    </td>
    <td class="sideForPartsTable">Title + sum1 + sum2</td>
    <td class="sideForPartsTable" width="5%">edit</td>
    <td class="sideForPartsTable" width="5%">remove</td>

  </tr>

  <tr>
    <td>
      <table class="partTableContent">
        <tr>
          <td> Test1 </td>
        </tr>
        <tr>
          <td> Test2 </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

Upvotes: 0

Milan Chheda
Milan Chheda

Reputation: 8249

Use closest() to get the parent table and find the sub-table using find(), thereby removing the headache of traversing using next() or tr: 

closest('table.partsTable').find('table.partTableContent')


$(document).ready(function() {
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    $(this).closest('table.partsTable').find('table.partTableContent').slideToggle(1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="partsTable">

  <tr>

    <td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
    <td class="sideForPartsTable">Title + sum1 + sum2</td>
    <td class="sideForPartsTable" width="5%">edit</td>
    <td class="sideForPartsTable" width="5%">remove</td>

  </tr>

  <tr>
    <td>
      <table class="partTableContent">
        <tr>
          <td> Test1 </td>
        </tr>
        <tr>
          <td> Test2 </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

Upvotes: 0

guradio
guradio

Reputation: 15565

  1. Add td in the of table.
  2. Use closest to get the parent tr of button then use next then find the table to target the table

$(document).ready(function() {
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    // .parent() selects the A tag, .next() selects the P tag
    $(this).closest('tr').next(' tr').find('table').slideToggle(200);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="partsTable">

  <tr>

    <td class="sideForPartsTable" width="5%">
      <button class="expandButton">Expand button</button>
    </td>
    <td class="sideForPartsTable">Title + sum1 + sum2</td>
    <td class="sideForPartsTable" width="5%">edit</td>
    <td class="sideForPartsTable" width="5%">remove</td>

  </tr>

  <tr>
    <td>
      <table class="partTableContent">
        <tr>
          <td> Test1 </td>
        </tr>
        <tr>
          <td> Test2 </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

Upvotes: 3

Related Questions