Ir para conteúdo

POWERED BY:

Arquivado

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

Denis_Uyeda

[Resolvido] Apagar <tr> pelo removeChild

Por , em Javascript

Recommended Posts

Denis_Uyeda    0

Denis_Uyeda
Postado

Olá!

 

Tenho um problema assim: Não consigo apagar um <tr> de uma <table> pelo método removeChild... sendo que o <tr> tem um id, então eu o seleciono pelo id, e tento apagar do <table> que também tem um id:

 

Observem:

 

<table id='tabela'>
<tr>
	<td>Teste</td>
</tr>
<tr id='linha_old'>
	<td>Conteudo</td>
</tr>
</table>

<input type='button' value='Apagar' onclick='apagar()' />

 

a função apagar()

function apagar(){
   var tr = document.getElementById('linha_old');
   var tabela = document.getElementById("tabela");
   tabela.removeChild(tr);
}

 

Curiosamente, se adiciono a linha em tempo de execução

	function adicionar(){
		var tr = document.createElement("tr");
		tr.id = 'linha_new';
		var td = document.createElement("td");
		var text = document.createTextNode("XPTO");
		var tabela = document.getElementById("tabela");

		td.appendChild(text);
		tr.appendChild(td);

		tabela.appendChild(tr);			
	}

 

<input type='button' value='Adicionar' onclick='adicionar()' />

 

A linha adicionada eu consigo apagar

	function apagar(){
		var tr = document.getElementById('linha_new');
		var tabela = document.getElementById("tabela");
		tabela.removeChild(tr);
	}

 

Estou usando Firefox..

Alguém tem alguma idéia?

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

esquisito mesmo.. consegui com o deleteRow()

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>removeChild</title>


<script type="text/javascript">
function apagar()
{
	var d = document.getElementById("top"); 
	var d_nested = document.getElementById("nested"); 
	var throwawayNode = d.deleteRow( d_nested );
}
</script>
</head>
<body>
<table id="top">
	<tr>
		<td>Teste</td>
	</tr>
	<tr id="nested">
		<td>Conteudo</td>
	</tr>
</table>


<input type="button" value="Apagar" onclick="apagar()" />
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis_Uyeda    0

Denis_Uyeda
Postado

Então.. eu testei com o deleteRow, e o parâmetro que é passado para ele é o index da <tr> dentro da <table>, e pode ser que eu não tenha essa informação para passar.

 

Mas eu consegui da seguinte forma:

	function apagar(){			
		var tr = document.getElementById('linha_old');						
		tr.parentNode.removeChild(tr);
	}

 

Acontece que, testando aqui, o <tr> não é um elemento-filho da <table>. Existe um elemento intermediário entre os dois.

 

Isso pode ser verificado assim

	function testar(){
		var tr = document.getElementById('linha_old');						
		alert(tr.parentNode);
		alert(tr.parentNode.parentNode);
	}

 

Então, acho q já está resolvido :)

 

Segue o código completo para quem precisar:

<html>
<head>
<title>Teste</title>
<script>
	function apagar(){			
		var tr = document.getElementById('linha_old');						
		tr.parentNode.removeChild(tr);
	}

	function testar(){
		var tr = document.getElementById('linha_old');						
		alert(tr.parentNode);
		alert(tr.parentNode.parentNode);
	}
</script>
</head>

<body>

<table id='tabela'>
<tr>
	<td>Teste</td>
</tr>
<tr id='linha_old'>
	<td>Conteudo</td>
</tr>
</table>

<input type='button' value='Apagar' onclick='apagar()' />
<input type='button' value='Testar parentNode' onclick='testar()' />
</body>

</html>

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

bem observado...

 

alert(tr.parentNode.nodeName);//TBODY

até pensei nisso, mas não dei muita importância.

 

Gz!

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