Receive onclick data and send to js

Asked

Viewed 1,284 times

3

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

html test.

<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 file table js.:

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 lines is working.

But the function excluirLinha(), is not receiving the parameter from the page html. Therefore, it does not exclude the desired line.

Which command should I use, so when I click the 'X' that is inside the table in html, send the deletion request to the file .js?

javascript

  • That one tabela.js has the code as shown or has some function to encapsulate those functions that you showed?

1 answer

2

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: https://jsfiddle.net/beq1jnaw/

I don’t see in your question what you’re calling the function excluirLinha() but I think the example helps. My function receives a value in el which is the this that we passed on to you. That el will be the button itself. Then it will search by climbing the DOM until it finds an element <tr> and then remove it.

  • However, in html there is no delete buttonLine(); The table is created with a Boot already coming from the js file, embedded in the table. I’ll Post html and js.

  • My code works well -> https://jsfiddle.net/etowjn54/ what you forgot to adapt was in your code that generates the line add a this. Thus: "<td><input class='bc' id='e' type='button' value='X' onclick= 'excluirLinha(this)'/></td>" and remove that id="e", is doing nothing and Ids must be unique.

Browser other questions tagged javascript

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