Show and hide from bank

Asked

Viewed 42 times

1

I’m doing this job

<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 while, and I want you to show only the tr that I am clicking with the "Ver_address" button. How could I ?

php jquery

  • In $("tr.tr_end").toggle() Javascript will fetch all lines that have the class tr_end, which are all apparently. To activate only the one you are pressing, you need to pass some unique identifier per function parameter.

  • this is the problem, I’m not able to pass the identifier that comes from php to the javascript function, because it seems that javascript does not accept strings with break lines, and the text that comes from the database that could identify the TR is coming with break lines

2 answers

1

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

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

This will make it enough in function the input that was clicked.
Then you can use the closest of Jquery to get the nearest button parent element that has the class tr_end, thus:

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

Reference: https://api.jquery.com/closest/

EDIT: in his example, the TR with the class "tr_end" is after the TR where is the button that will be clicked. If that is the scenario, closest will not work, if you want to select the next element, you must use next in place of closest: https://api.jquery.com/next/

0


Since you are using jQuery, you could use the library methods like the event .click, which dispenses with the use of onclick and function ver_endereco().

Behold:

$(":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>
<table border="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>

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.