Table button to update the row

Asked

Viewed 769 times

3

I have a table, in the last column of each row I add a button. I need to click the update button, my question is: How I will reference the line with the button?

For example a table with the Matricula column and another Exculsion, when clicking the Delete button of the 123 matricula line, how do I know that the button is from Matricula 123? I need this value to update using onClick.

<script>
   function excluir(){
       // como saber a matricula?
   }
</script>

<input type="button" name="botao" value="Dispara função" onclick="excluir()">

php javascript html

  • I added an answer to add content to your question, worth taking a look Felipe.

3 answers

4


What you can do is pass the parameter inside the function, certainly when you mount this button you get this parameter, then just pass inside the function in the onClick that it will receive this value in the function.

Example:

function excluir(matricula){
       // Aqui você trabalharia com seu código, o  alert é apenas um teste;
       alert(matricula)
   }
<input type="button" name="botao" value="Dispara função" onclick="excluir('123')">

2

Whoa, whoa, whoa, whoa? Create the delete function to receive the parameter you want to delete:

function excluir(matricula){
       // execute sua ação com o parametro matricula por ex: (123)
       console.log(matricula);
   }
<input type="button" name="botao" value="Dispara função" onclick="excluir(123)">

0

I created two examples to facilitate your understanding, in case there are still doubts.

1: If in your table there are only the two columns mentioned Enrollment and Knob, you can pass the value of the registration through the attribute value from the Delete button as follows:

<!DOCTYPE html>
<html>
<body>
<h2>stackOverFlow</h2>

<table border="1">
  <tr>
    <th>Matricula</th>
    <th>Exclusão</th> 
  </tr>
  <tr>
    <td>1</td>
    <td> <button type="button" value="1" onClick="receberMatricula(this);">Excluir</button> </td>
  </tr>
  <tr>
    <td>2</td>
    <td> <button type="button" value="2" onClick="receberMatricula(this);">Excluir</button> </td>
  </tr>
  <tr>
    <td>3</td>
    <td> <button type="button" value="3" onClick="receberMatricula(this);">Excluir</button> </td>
  </tr>
</table>

<script>
    function receberMatricula(e){ 
       alert(e.value); // exibindo valor(matricula) passado pelo element button.
    }
</script>

</body>
</html>

2: If your table has more than one cell where you want to treat its values, you can manipulate them as follows:

<!DOCTYPE html>
<html>
<body>
<h2>stackOverFlow</h2>

<table border="1" id="minhaTabela">
  <tr>
    <th>Matricula</th>
    <th>Nome</th>
    <th>Peso</th>
    <th>Exclusão</th> 
  </tr>
  <tr>
    <td>1</td>
    <td>André</td>
    <td>80KG</td>
    <td> <button type="button" value="1" onClick="exibirValoresLinha(this);">Excluir</button> </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Túlio</td>
    <td>60KG</td>
    <td> <button type="button" value="2" onClick="exibirValoresLinha(this);">Excluir</button> </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Hugo</td>
    <td>58KG</td>
    <td> <button type="button" value="3" onClick="exibirValoresLinha(this);">Excluir</button> </td>
  </tr>
</table>

<script>
    function exibirValoresLinha(e){

       var linha = e.parentNode.parentNode.children;

       var resultado = "Célula com resultados ";
       for(var i = 0 ; i < linha.length - 1; i++){
            resultado = resultado + linha[i].textContent + " ";
       }

      alert(resultado);
    }
</script>

</body>
</html>

Note: Hierarchically speaking, the button passed by parameter(this) has "parents" that we will deal with to obtain their values. When we apply the e.parentNode, we refer to the object <td>(parent of the button element), and, when re-applying parentNode: e.parentNode.parentNode is returned object referring to line <tr>(parent of the element ). With the element <tr> in hands, we use the attribute .children which returns a list of its child elements<td> and contains all values of the line cells. var linha = e.parentNode.parentNode.children;

Browser other questions tagged php javascript html

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