ERRO NA EXCLUSÃO DE LINHA DE TABELA COM JAVASCRIPT
Olá a todos,
Estou tentando criar um script para inserção e exclusão de linhas de tabela com Javascript, mas estou com alguns probleminhas. Ele exclui as linhas normalmente, mas quando resta uma ele dá erro.
Outra dificuldade que tenho é de não precisar usar a linha lnkRemover.setAttribute([Ô]onclick[Ô],[Ô]remover([Ô]+ln+[Ô])[Ô]); coloquei essa linha porque não vi outra alternativa de identificar o link da linha selecionado para removê-la, minha intenção era de deixar o meu código html sem nenhum script e identificar o evento click da mesma forma que fiz com o var btnInserir = document.getElementById([Ô]Inserir[Ô]);
Gostaria da ajuda de alguém que já entende melhor que eu Javascript para dar uma melhorada no meu código.
Obrigada amigos!
Código JavaScript
var ln = 0;
window.onload = function(){
var frm = document.getElementById([Ô]frm[Ô]);
var btnInserir = document.getElementById([Ô]Inserir[Ô]);
btnInserir.onclick = function(){
inserir(frm.nome, frm.email, frm.cep);
};
}
function inserir(nome, email, cep){
var tb = document.getElementById([Ô]tbDados[Ô]);
var linha = tb.insertRow(-1);
var cel0 = linha.insertCell(0);
var cel1 = linha.insertCell(1);
var cel2 = linha.insertCell(2);
var cel3 = linha.insertCell(3);
var lnkRemover = document.createElement([Ô]a[Ô]);
lnkRemover.setAttribute([Ô]href[Ô], [Ô]#[Ô]);
lnkRemover.setAttribute([Ô]class[Ô], [Ô]l[Ô]+ln);
lnkRemover.setAttribute([Ô]onclick[Ô],[Ô]remover([Ô]+ln+[Ô])[Ô]);
var linkTexto = document.createTextNode([Ô]Remover[Ô]);
lnkRemover.appendChild(linkTexto);
cel0.appendChild(document.createTextNode(nome.value));
cel1.appendChild(document.createTextNode(email.value));
cel2.appendChild(document.createTextNode(cep.value));
cel3.appendChild(lnkRemover);
nome.value = [Ô][Ô];
email.value = [Ô][Ô];
cep.value = [Ô][Ô];
ln++;
}
function remover(id){
var resp = confirm([Ô]Excluir registro?[Ô])
if(!resp)
return;
var tb = document.getElementById([Ô]tbDados[Ô]);
var rowCont = tb.rows.length;
tb.deleteRow(id);
--ln;
}
Código HTML
<!DOCTYPE html>
<html lang=[Ô]pt=BR[Ô]>
<head>
<meta charset=[Ô]UTF-8[Ô]/>
<title>Cadastro Simples</title>
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/estilo.css[Ô] media=[Ô]all[Ô]/>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/script.js[Ô]></script>
</head>
<body>
<form id=[Ô]frm[Ô]>
<fieldset><legend>Formulário</legend>
<table id=[Ô]controles[Ô]>
<tr><td class=[Ô]campo_editor[Ô]><label for=[Ô]nome[Ô]>Nome:</label></td><td><input type=[Ô]text[Ô] name=[Ô]nome[Ô] id=[Ô]nome[Ô]/></td></tr>
<tr><td class=[Ô]campo_editor[Ô]><label for=[Ô]email[Ô]>Email:</label></td><td><input type=[Ô]text[Ô] name=[Ô]email[Ô] id=[Ô]email[Ô]/></td></tr>
<tr><td class=[Ô]campo_editor[Ô]><label for=[Ô]cep[Ô]>CEP:</label></td><td><input type=[Ô]text[Ô] name=[Ô]cep[Ô] id=[Ô]cep[Ô]/></td></tr>
<tr><td class=[Ô]campo_editor[Ô]><button type=[Ô]button[Ô] id=[Ô]Inserir[Ô]/>Inserir</button></td></tr>
</table>
</fieldset>
<br />
<fieldset id=[Ô]fldDados[Ô]>
<table id=[Ô]tbDados[Ô]>
</table>
</fieldset>
</form>
</body>
</html>
Estou tentando criar um script para inserção e exclusão de linhas de tabela com Javascript, mas estou com alguns probleminhas. Ele exclui as linhas normalmente, mas quando resta uma ele dá erro.
Outra dificuldade que tenho é de não precisar usar a linha lnkRemover.setAttribute([Ô]onclick[Ô],[Ô]remover([Ô]+ln+[Ô])[Ô]); coloquei essa linha porque não vi outra alternativa de identificar o link da linha selecionado para removê-la, minha intenção era de deixar o meu código html sem nenhum script e identificar o evento click da mesma forma que fiz com o var btnInserir = document.getElementById([Ô]Inserir[Ô]);
Gostaria da ajuda de alguém que já entende melhor que eu Javascript para dar uma melhorada no meu código.
Obrigada amigos!
Código JavaScript
var ln = 0;
window.onload = function(){
var frm = document.getElementById([Ô]frm[Ô]);
var btnInserir = document.getElementById([Ô]Inserir[Ô]);
btnInserir.onclick = function(){
inserir(frm.nome, frm.email, frm.cep);
};
}
function inserir(nome, email, cep){
var tb = document.getElementById([Ô]tbDados[Ô]);
var linha = tb.insertRow(-1);
var cel0 = linha.insertCell(0);
var cel1 = linha.insertCell(1);
var cel2 = linha.insertCell(2);
var cel3 = linha.insertCell(3);
var lnkRemover = document.createElement([Ô]a[Ô]);
lnkRemover.setAttribute([Ô]href[Ô], [Ô]#[Ô]);
lnkRemover.setAttribute([Ô]class[Ô], [Ô]l[Ô]+ln);
lnkRemover.setAttribute([Ô]onclick[Ô],[Ô]remover([Ô]+ln+[Ô])[Ô]);
var linkTexto = document.createTextNode([Ô]Remover[Ô]);
lnkRemover.appendChild(linkTexto);
cel0.appendChild(document.createTextNode(nome.value));
cel1.appendChild(document.createTextNode(email.value));
cel2.appendChild(document.createTextNode(cep.value));
cel3.appendChild(lnkRemover);
nome.value = [Ô][Ô];
email.value = [Ô][Ô];
cep.value = [Ô][Ô];
ln++;
}
function remover(id){
var resp = confirm([Ô]Excluir registro?[Ô])
if(!resp)
return;
var tb = document.getElementById([Ô]tbDados[Ô]);
var rowCont = tb.rows.length;
tb.deleteRow(id);
--ln;
}
Código HTML
<!DOCTYPE html>
<html lang=[Ô]pt=BR[Ô]>
<head>
<meta charset=[Ô]UTF-8[Ô]/>
<title>Cadastro Simples</title>
<link rel=[Ô]stylesheet[Ô] type=[Ô]text/css[Ô] href=[Ô]css/estilo.css[Ô] media=[Ô]all[Ô]/>
<script type=[Ô]text/javascript[Ô] src=[Ô]js/script.js[Ô]></script>
</head>
<body>
<form id=[Ô]frm[Ô]>
<fieldset><legend>Formulário</legend>
<table id=[Ô]controles[Ô]>
<tr><td class=[Ô]campo_editor[Ô]><label for=[Ô]nome[Ô]>Nome:</label></td><td><input type=[Ô]text[Ô] name=[Ô]nome[Ô] id=[Ô]nome[Ô]/></td></tr>
<tr><td class=[Ô]campo_editor[Ô]><label for=[Ô]email[Ô]>Email:</label></td><td><input type=[Ô]text[Ô] name=[Ô]email[Ô] id=[Ô]email[Ô]/></td></tr>
<tr><td class=[Ô]campo_editor[Ô]><label for=[Ô]cep[Ô]>CEP:</label></td><td><input type=[Ô]text[Ô] name=[Ô]cep[Ô] id=[Ô]cep[Ô]/></td></tr>
<tr><td class=[Ô]campo_editor[Ô]><button type=[Ô]button[Ô] id=[Ô]Inserir[Ô]/>Inserir</button></td></tr>
</table>
</fieldset>
<br />
<fieldset id=[Ô]fldDados[Ô]>
<table id=[Ô]tbDados[Ô]>
</table>
</fieldset>
</form>
</body>
</html>
KELLY,
Estou pensando (chutando) uma coisa aqui...
... será que o problema não é na exclusão propriamente dita, mas no apontamento.
Se não tem nenhum registro, para onde aponta? Pode ser o caso de se perder e dar erro.
Veja também:
==============================================
Confirmação antes de deletar registro com Javascript
http://rafaelcouto.com.br/confirmacao-antes-de-deletar-registro-com-javascript/
==============================================
Função javascript para excluir registro
http://www.guj.com.br/1024-funcao-javascript-para-excluir-registro
==============================================
[][ô]s,
Tunusat.
Estou pensando (chutando) uma coisa aqui...
... será que o problema não é na exclusão propriamente dita, mas no apontamento.
Se não tem nenhum registro, para onde aponta? Pode ser o caso de se perder e dar erro.
Veja também:
==============================================
Confirmação antes de deletar registro com Javascript
http://rafaelcouto.com.br/confirmacao-antes-de-deletar-registro-com-javascript/
==============================================
Função javascript para excluir registro
http://www.guj.com.br/1024-funcao-javascript-para-excluir-registro
==============================================
[][ô]s,
Tunusat.
TUNUSAT você viu também o que eu queria fazer? Eu criei cada link dinamicamente e dentro dela uma função para retornar o Ãndice de cada linha para poder removê-la. Você conhece outra forma mais profissional de se fazer isso?
Primeiramente, separe sua tabela com as tags <thead>, <tbody> e <tfooter>, isso fará uma separação melhor entre linhas de cabeçalho, dados e rodapé. O erro que você está tendo é por causa disso. Segundo, não há a menor necessidade de se usar o javascript da maneira que você está fazendo. Utilize o JQuery que já é um framework maduro e largamente usado em milhões de aplicações web. Para fazer a exclusão de cada linha, o ideal é identificar cada linha com algo que seja único, como um código ou mesmo o e-mail, mas melhor se for o código.
Considere também o uso de Grids maduros como o DataTables, ele transforma sua tabela em um grid com diversas funcionalidades já embutidas, como paginação, ordenação de colunas e procura de dados dentro da tabela, verifique os diversos exemplos no link.
Considere também o uso de Grids maduros como o DataTables, ele transforma sua tabela em um grid com diversas funcionalidades já embutidas, como paginação, ordenação de colunas e procura de dados dentro da tabela, verifique os diversos exemplos no link.
Oi KERPLUNK, eu estava lendo sobre o DataTables em uma revista da devmedia do .net da edição 104, vou aprofundar nesse assunto. Achei legal você comentar sobre ele.
Eu modifiquei o meu código, mas ainda não com a sugestão que você me deu porque já havia feito. Queria primeiro tentar colocar para funcionar a minha ideia.
Eu coloquei um atributo chamado data-codigo links que vão ser usados para remover as linhas contendo um número para de cada linha e também coloquei uma classe para estes links chamada remover.
Agora preciso saber como capturar o evento onclick de classes no Javascript, no Jquery vi que é fácil, mas no meu caso é Javascript.
Segue o código modificado:
var ln = 0;
window.onload = function(){
var frm = document.getElementById([Ô]frm[Ô]);
var btnInserir = document.getElementById([Ô]Inserir[Ô]);
btnInserir.onclick = function(){
inserir(frm.nome, frm.email, frm.cep);
};
var btnRemover = document.getElementsByClassName([Ô]remover[Ô]);
btnRemover.onclick = function(){
var id = btnRemover.getAttribute([Ô]data-codigo[Ô]);
remover(id);
};
}
function inserir(nome, email, cep){
var tb = document.getElementById([Ô]tbDados[Ô]);
var linha = tb.insertRow(-1);
var cel0 = linha.insertCell(0);
var cel1 = linha.insertCell(1);
var cel2 = linha.insertCell(2);
var cel3 = linha.insertCell(3);
var lnkRemover = document.createElement([Ô]a[Ô]);
lnkRemover.setAttribute([Ô]href[Ô], [Ô]#[Ô]);
lnkRemover.setAttribute([Ô]class[Ô],[Ô]remover[Ô]);
lnkRemover.setAttribute([Ô]data-codigo[Ô], ln);
var linkTexto = document.createTextNode([Ô]Remover[Ô]);
lnkRemover.appendChild(linkTexto);
cel0.appendChild(document.createTextNode(nome.value));
cel1.appendChild(document.createTextNode(email.value));
cel2.appendChild(document.createTextNode(cep.value));
cel3.appendChild(lnkRemover);
nome.value = [Ô][Ô];
email.value = [Ô][Ô];
cep.value = [Ô][Ô];
ln++;
}
function remover(id){
var resp = confirm([Ô]Excluir registro?[Ô])
if(!resp)
return;
var tb = document.getElementById([Ô]tbDados[Ô]);
tb.deleteRow(id);
--ln;
}
Eu modifiquei o meu código, mas ainda não com a sugestão que você me deu porque já havia feito. Queria primeiro tentar colocar para funcionar a minha ideia.
Eu coloquei um atributo chamado data-codigo links que vão ser usados para remover as linhas contendo um número para de cada linha e também coloquei uma classe para estes links chamada remover.
Agora preciso saber como capturar o evento onclick de classes no Javascript, no Jquery vi que é fácil, mas no meu caso é Javascript.
Segue o código modificado:
var ln = 0;
window.onload = function(){
var frm = document.getElementById([Ô]frm[Ô]);
var btnInserir = document.getElementById([Ô]Inserir[Ô]);
btnInserir.onclick = function(){
inserir(frm.nome, frm.email, frm.cep);
};
var btnRemover = document.getElementsByClassName([Ô]remover[Ô]);
btnRemover.onclick = function(){
var id = btnRemover.getAttribute([Ô]data-codigo[Ô]);
remover(id);
};
}
function inserir(nome, email, cep){
var tb = document.getElementById([Ô]tbDados[Ô]);
var linha = tb.insertRow(-1);
var cel0 = linha.insertCell(0);
var cel1 = linha.insertCell(1);
var cel2 = linha.insertCell(2);
var cel3 = linha.insertCell(3);
var lnkRemover = document.createElement([Ô]a[Ô]);
lnkRemover.setAttribute([Ô]href[Ô], [Ô]#[Ô]);
lnkRemover.setAttribute([Ô]class[Ô],[Ô]remover[Ô]);
lnkRemover.setAttribute([Ô]data-codigo[Ô], ln);
var linkTexto = document.createTextNode([Ô]Remover[Ô]);
lnkRemover.appendChild(linkTexto);
cel0.appendChild(document.createTextNode(nome.value));
cel1.appendChild(document.createTextNode(email.value));
cel2.appendChild(document.createTextNode(cep.value));
cel3.appendChild(lnkRemover);
nome.value = [Ô][Ô];
email.value = [Ô][Ô];
cep.value = [Ô][Ô];
ln++;
}
function remover(id){
var resp = confirm([Ô]Excluir registro?[Ô])
if(!resp)
return;
var tb = document.getElementById([Ô]tbDados[Ô]);
tb.deleteRow(id);
--ln;
}
Veja este exemplo adicionando e excluindo linhas e ainda somando os valores de uma determinada coluna, usando JQuery
Tópico encerrado , respostas não são mais permitidas