Receive onclick data and send to js

Question

Receive onclick data and send to js

Navigation

#1 by (2 votes)

3

I'm building a page with a table, which will plot a chart.

test.html

<html>
<head>
  <title>Teste</title>
  <style>
    body{
        margin: 0px;
        padding: 0px;
    }
  </style>
  <script src="tabela.js"></script>
</head>
<body>
  <button class="bc" onclick="criarTabela(this)">Criar Tabela</button>
  <button class='bc'onclick="incluirLinha()">Criar Linha</button>
  <canvas id="mycanvas" width="578" height="200"></canvas>
  <script>
      var canvas= document.getElementById('mycanvas');
      var context= canvas.getContext('2d');
      context.beginPath();
      context.moveTo(100, 100);
      context.lineTo(100,220);
      context.stroke();
    </script>
  </body>
</html>

Below the contents of the table.js file:

function criarTabela(botao) {
  //Desabilita botão criar
  botao.disabled = true;
  //Cria tabela
  t = document.createElement("TABLE");
  t.id = "T1";
  //Cria corpo da tabela
  tb = document.createElement("TBODY");
  //Cria linha
  l = document.createElement("TR");
  //Cria primeira célula para a linha
  c1 = document.createElement("TH");
  x = document.createTextNode("X");
  c1.width = "100px";
  c1.appendChild(x);
  //Cria segunda célula para a linha
  c2 = document.createElement("TH");
  x = document.createTextNode("Y");
  c2.width = "100px";
  c2.appendChild(x);
  //Cria terceira célula para a linha
  c3 = document.createElement("TH");
  c3.width = "20px";
  l.appendChild(c1); // adiciona célula a linha
  l.appendChild(c2); // adiciona célula a linha
  l.appendChild(c3); // adiciona célula a linha
  tb.appendChild(l); // adiciona linha ao corpo tabela
  t.appendChild(tb); // adicionar corpo a tabela
  t.border = 2;
  document.body.appendChild(t); // adiciona tabela ao documento
}

function incluirLinha() {
  T1 = document.getElementById("T1"); // obtem tabela
  TR = T1.insertRow(T1.rows.length); // insere linha final
  TR.innerHTML =
    "<td><input class='ic' type='text' value=''/></td>" +
    "<td><input class='ic' type='text' value=''/></td>" +
    "<td><input class='bc' id='e' type='button' value='X' onclick= 'excluirLinha()'/></td>";
}

function excluirLinha() {
  T1 = document.getElementById('T1');
  T1 = deleteRow(event.srcElement.parentElemet.parentElement.rowIndex);
}

function obterPontos() {
  // returna um vetor bidimensional com os pontos
  // da tabela
  T1 = document.getElementById('T1');
  pontos = [];
  for (var i = 1; i < T1.rows.lenght; i++) {
    pontos[i - 1] = [T1.rows[i].cells[0].childNodes[0].value, T1.rows[i].cells[1].childNodes[0].value];
  }
  return pontos;
}

The creation of the table and the inclusion of the rows are working.

But the excluirLinha() function is not getting the parameter coming from the html page. Therefore, it does not delete the desired line.

What command should I use, when I click on the 'X' that is inside the table in html , send the delete request to the file .js ?

javascript

asked by anonymous 15.04.2015 / 05:04

1 answer

How to remove alert from "Uncaught RangeError: Maximum call stack size exceeded" How to remove specific rows from a data frame?

score 2 · Answer 1

You need to pass this as a parameter of this function, and the function itself can be something like:

function excluirLinha(el) {
    var tr = el;
    while (tr.nodeName != "TR" && tr.parentNode) {
        tr = tr.parentNode;
    }
    tr.parentNode.removeChild(tr);
}

In HTML it would be:

    <td>
        <button class='bc' onclick="excluirLinha(this)" type="button">Excluir Linha</button>
    </td>

Example: link

I do not see in your question how you are calling the excluirLinha() function but I think the example helps. My function gets a value in el which is the this that we passed it. This el will be the button itself. Then it will look up in the DOM until it finds a <tr> element and removes it.