CODEWITHSUNDEEP
jqueryhtmlcss
peyman
peyman

Reputation: 177

how find next row of button clicked in td?

i have table and for every row i have another row that is dispaly:none.
i want when i clicked span in td of visible row next row be visible.

i tried :-

$('span').click(function()
            $(this).closest('tr').next('tr').css('display','block')
        })

this switch display to block but the tr not displayed correctly as when it's display is block by default. when i try this the next row width is as first column of currnet tr. whats the problem?

 <tr>
    <td style="width:40px"></td>
    <td><span>show</span></td>
    <td></td>
 </tr>
  <tr "style=display:none">
    <td colspan="4" >
        <h5>پاسخ دادن</h5>
        <textarea style="width:100%;"></textarea>
     </td>
  </tr>

Upvotes: 2

Views: 420

Answers (2)

Meenesh Jain
Meenesh Jain

Reputation: 2528

You can try with parent selector in jquery

$('span').click(function(){
        $(this).parents('tr').next('tr').show();
    });

refer HERE

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388346

One easy solution is to set the display to blank like

$('span').click(function() {
  $(this).closest('tr').next('tr').css('display', '');//or set it as table-row which is the default display for tr
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td style="width:40px"></td>
    <td><span>show</span></td>
    <td></td>
  </tr>
  <tr style="display:none">
    <td colspan="3">
      <h5>پاسخ دادن</h5>
      <textarea style="width:100%;"></textarea>
    </td>
  </tr>
</table>

Upvotes: 4

Related Questions