Show and hide from the bank

Question

Show and hide from the bank

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm doing this function

<script>

function ver_endereco(){
    $("tr.tr_end").toggle();
}
</script>

In this PHP code

<?php 
            while($row = $result->fetchArray()) {

                ?>

            <tr class="tr_lista">
                <td><?php echo $row['nome']; ?></td><td style="text-align: center;"><?php echo $row['forma_pagamento'];?></td>
                <td><?php echo $row['observacao'];?></td><td style="text-align: center;"><?php echo $row['data_pedido'];?></td>
                <td><input type="button" value="Ver mercadorias" onclick="ver_endereco();"/></td>

            </tr>
            <tr class="tr_end">
            <td colspan="5">
                <textarea rows="7" cols="90" disabled="disabled" style="resize:none;"><?php echo $row['mercadoria'];?></textarea>
            </td>
            </tr>

The problem is that the toogle effect is showing all the tr listed by the while, and I want it to show only the tr that I'm clicking with the "View_Address" button. How could I do it?

php jquery

asked by anonymous 25.04.2018 / 17:36

2 answers

1

Pass a reference to function , of the element that fired the event for example using this :

<input type="button" value="Ver mercadorias" onclick="ver_endereco(this);"/>

This will get it to function o input that was clicked. Then you can use the closest of JQuery to get the parent element of the nearest button that has the tr_end class, like this:

function ver_endereco(botao){
    $(botao).closest("tr.tr_end").toggle();
}

Reference: link

EDIT: In your example, TR with class "tr_end" is after TR where the button is to be clicked. If it is the same scenario, closest will not work, if you want to select the next element, you should use next instead of closest :

25.04.2018 / 18:09

Error Undefined property Code is jumping lines - Python

score 0 · Accepted Answer

Since you are using jQuery, you could use library methods such as .click , which excludes the use of onclick and ver_endereco() .

See:

$(":button", ".tr_lista").click(function(){
   
   $(this)
   .closest("tr")
   .next(".tr_end")
   .toggle();
   
});

.tr_end{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder="1" width="100%">
   <tr class="tr_lista">
      <td>nome 1</td>
      <td style="text-align: center;">pag1</td>
      <td>obs1</td>
      <td style="text-align: center;">data1</td>
      <td><input type="button" value="Ver mercadorias"/></td>
   </tr>
   <tr class="tr_end">
      <td colspan="5">
         <textarea rows="7" cols="90" disabled="disabled" style="resize:none;">mercadoria1</textarea>
      </td>
   </tr>

<tr class="tr_lista">
<td>nome 2</td><td style="text-align: center;">pag2</td>
<td>obs2</td><td style="text-align: center;">data2</td>
<td><input type="button" value="Ver mercadorias"/></td>

</tr>
<tr class="tr_end">
<td colspan="5">
<textarea rows="7" cols="90" disabled="disabled" style="resize:none;">mercadoria2</textarea>
</td>
</tr>
</table>