Publicado em 1 de jun.

Apagar linha em tabela dinâmica

No exemplo abaixo, não estou conseguindo apagar uma linha específica. Apaga sempre a primeira. Alguém sabe resolver? Me parece que o valor de "r" não está sendo passado.

<html>

<head>

</head>

 

<script type="text/javascript">

function deleteRow®

{

var i=r.parentNode.parentNode.rowIndex;

document.getElementById('myTable').deleteRow(i);

}

 

function insRow(val)

{

var x=document.getElementById('myTable').insertRow(0);

var y=x.insertCell(0);

var z=x.insertCell(1);

var m=x.insertCell(2);

 

y.innerHTML= val;

z.innerHTML= "teste";

m.innerHTML="<center><img src='imagens/delete_icon.gif' alt='Excluír item' onclick='deleteRow(this)' style='cursor:hand;'>";

 

 

}

</script>

 

<body>

 

 

<table id="myTableTop" border="1" style="width:51%" cellpadding="0" cellspacing="0">

<tr>

 <th width='10%'>Código:</th>

 <th width='80%'>Nome:</th>

 <th width='10%'>Excluir:</th>

</tr>

</table>

 

<table id="myTable" border="1" style="width:51%" cellpadding="0" cellspacing="0"style="border-collapse: collapse;">

</table>

 

<br />

 

<input type="Text" id="OK" value="">

<input type="button" onclick="insRow(OK.value)" value="TESTE">

 

</body>

</html>

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

hinom· 2 de jun.

faça um teste assim:

function deleteRow( ){
tbl = document.getElementById('myTable')

objRow = tbl.getElementsByTagName('tr');
 objRowSize = objRow.length - 1;
 for( i = objRowSize; i >= 0; i-- ){ // faz um loop de baixo pra cima em todas as linhas
 alert(i); // mostra uma caixa de alerta. para testes somente
 //tbl.deleteRow(i); // exclui a linha encontrada
 }
}

veja quais valores retornam no alert()

obs:

nas tabelas adicione a tag tbody

<table id="myTable" border="1" style="width:51%" cellpadding="0" cellspacing="0"style="border-collapse: collapse;">
<tbody>

</tbody>
</table>

o escopo padronizado de uma tabela:

<table>
	<tbody>
 <tr>
 <td></td>
 </tr>
	</tbody>
</table>

PeuNunes· 2 de jun.

Se o valor de i fosse o valor da linha que estou selecionando, funcionaria. Mas continuo sem conseguir apagar uma linha específica. Desculpe, sou novo em DHTML (mas estou virando fã!).

Alguém sabe como pegar a linha em questão para apagá-la?

Obs.: O método DeleteRow parece que está funcionando no próprio clique do mouse. Ele não entra na função. Porém se mudo de DeleteRow para DelRow, por exemplo, aí a função é reconhecida (porém o parâmetro passado, não). Me parece que o DeleteRow(this) funciona sem depender de escrever uma função.

PeuNunes· 12 de jun.

RESOLVIDO!!

Fiz assim, logo abaixo de:

var m=x.insertCell(2);

acrescentei essa linha:

RowId = document.getElementById('myTable').rows.length - 2;

e a linha:

m.innerHTML="<center><img src='imagens/delete_icon.gif' alt='Excluír item' onclick='deleteRow(this)' style='cursor:hand;'>";

Mudei para:

m.innerHTML="<center><label id='LABEL"+RowId+"' value="+RowId+"><img src='imagens/delete_icon.gif' onclick='delRow(LABEL"+RowId+".id)' alt='Excluír item' style='cursor:hand;'></label></center>";

E para deletar:

function delRow(Obj)

{

 var tbl = document.getElementById('myTable')

 var objRow = tbl.getElementsByTagName('tr');

 

 objRowSize = objRow.length-2;

 

 for(var i = 0; i <= objRowSize; i++)

 {

 var x = tbl.getElementsByTagName('label')*; *

if (x.id == Obj)

{

tbl.deleteRow(i);

return(false);

}

VALEU!!

calcio· 13 de jun.

estou com um problema parecido...

só que preciso adicioar campos de texto e remove-los

tenho uma linha com um campo de texto, nessa linha, preciso fazer via botão a inserção de uma cax. de texto na mesma linha e tb remover

abaixo vai um exemplo do meu HTML pra terem uma noção real do que eu preciso

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste de JavaScript</title>
<script language="javascript">
function inclui_linha(){
	//alert("inclui_linha()");
}

function exclui_linha(){
	//alert("exclui_linha()");
}
</script>
</head>
<body>
<h2 align="center">Inclusão de Objetos de Formulário com JavaScript</h2>

<form action="#" method="post" name="frm_obj">
<table width="500" border="0" cellspacing="0" cellpadding="3">
 <tr>
	<td>Campo 1: </td>
	<td><input name="campo1" type="text" id="campo1" size="15" />
 <br />
 Criar campo/excluir</td>
	<td>Campo 2: </td>
	<td><input name="campo2" type="text" id="campo2" size="15" />
 <br />
 Criar campo/excluir </td>
 </tr>
 <tr>
	<td> </td>
	<td> </td>
	<td> </td>
	<td> </td>
 </tr>
 <tr>
	<td colspan="4" align="center">
	<input name="nova_linha" type="button" id="nova_linha" value="Incluir linha" onclick="inclui_linha();" />
	       
	<input name="excluir_linha" type="button" id="excluir_linha" value="Excluir linha" onclick="exclui_linha();" />
	</td>
 </tr>
</table>
</form>
</body>
</html>