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
?
tabela.js
tem o código como mostraste ou tem alguma função a encapsular essas funções que mostras-te?