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;
I added an answer to add content to your question, worth taking a look Felipe.
– RXSD