Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

PeuNunes

Apagar linha em tabela dinâmica

Por , em Javascript

Recommended Posts

PeuNunes    0

PeuNunes
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

PeuNunes    0

PeuNunes
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PeuNunes    0

PeuNunes
Postado

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!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

calcio    2

calcio
Postado

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">
<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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito