3

Estou construindo uma página com uma tabela, que irá plotar um gráfico.

teste.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>

Em baixo o conteúdo do ficheiro tabela.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;
}

Está funcionando a criação da tabela e a inclusão das linhas.

Porém a função excluirLinha(), não está recebendo o parâmetro vindo da página html. Logo, ela não exclui a linha desejada.

Qual comando devo utilizar, para quando eu clicar no 'X' que está dentro da tabela no html, envie o pedido de exclusão para o arquivo .js?

1
  • Esse tabela.js tem o código como mostraste ou tem alguma função a encapsular essas funções que mostras-te?
    – Sergio
    Commented 15/04/2015 às 3:07

1 Resposta 1

2

Precisas de passar this como parâmetro dessa função, e a própria função pode ser algo como:

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

No HTML seria:

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

Exemplo: https://jsfiddle.net/beq1jnaw/

Não vejo na tua pergunta como estás a chamar a função excluirLinha() mas creio que o exemplo ajude. A minha função recebe um valor no el que é o this que lhe passamos. Esse el vai ser o próprio botão. Aí ele vai procurar subindo no DOM até encontrar um elemento <tr> e aí remove-o.

2
  • Entendi.Porem no html nao existe o botao excluirLinha(); A tabela e criada com um Botao ja vindo do arquivo js, incorporado a tabela. Vou Postar o html e o js. Commented 16/04/2015 às 3:43
  • O meu código funciona bem -> jsfiddle.net/etowjn54 o que esqueceste adaptar foi no teu código que gera a linha acrescentar um this. Assim: "<td><input class='bc' id='e' type='button' value='X' onclick= 'excluirLinha(this)'/></td>" e retira esse id="e", não está a fazer nada e IDs têm de ser únicas.
    – Sergio
    Commented 16/04/2015 às 12:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .