Discussoes de Programacao e Tecnologia

Deletando todas as linhas de uma tabela (javascript)

12 respostas
R
rollei

Estou fazendo uma pagina usando jsp, javascript e java.

to precisando de uma funcao para deletar todas as rows de uma determinada tabela menos uma (no caso a primeira)

eu ja tenho uma funcao para deletar a linha da tabela

function deleteRow(row, idTable, idOption) { var i = row.parentNode.parentNode.rowIndex; document.getElementById(idTable).deleteRow(i); enable(idOption); }

do lado de cada linha da tabela tem um botao que chama essa funcao, mas no caso eu queria uma funcao para limpar toda a tabela e deixar somente o cabecalho que eh a primeira row.

como faco para percorrer a tabela? que atributo ou metodo de document.getElementById(idTabela) eu uso para fazer esse for? se alguem puder colocar um codigo exemplo eu agradeco.

[]'s

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

12 Respostas

R
rollei

tipo assim … eu soh preciso de um contador com o numero de linhas da tabela. para eu poder fazer o for apagando tudo. existe esse atributo no elemento?

T
tecdanilo

Fiz da seguinte forma: Veja se serve para você.

<!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 para apagar todas as linhas de uma tabela</title>
<script language="javascript" type="text/javascript">
	function clearTable(_idTab, _linhaPersistente){
		var linhas = document.getElementById(_idTab).rows;
		var i = 0;
		for (i= linhas.length-1; i>=0; i--){
			//alert(linhas[i].innerHTML);
			if (i != (_linhaPersistente-1) ){
				document.getElementById(_idTab).deleteRow(i);
			}
		}
	}
</script>
</head >

<body onload="clearTable('tabela1',4);">

		<table id="tabela1">
		<tr><td>Linha 1</td></tr>
		<tr><td>Linha 2</td></tr>
		<tr><td>Linha 3</td></tr>
		<tr><td>Linha 4</td></tr>
		<tr><td>Linha 5</td></tr>						
	</table>
</body>
</html>

TÉ+!

R
rollei

opa vlw. deu certin

[]'s

R
rollei

proveitar que voce ta online e fazer outra pergunta.

eu tenho essa funcao que ta inserindo linhas na tabela:

function insertRow(idTable, idData, idSelect) { var table = document.getElementById(idTable).insertRow(document.getElementById(idTable).rows.length); var cell0 = table.insertCell(0); var cell1 = table.insertCell(1); var cell2 = table.insertCell(2); var cell3 = table.insertCell(3); var cell4 = table.insertCell(4); var cell5 = table.insertCell(5); var select = document.getElementById(idSelect); var data = document.getElementById(idData); var idOption = select.options[select.selectedIndex].id; cell0.innerHTML = data.value; cell1.innerHTML = select.options[select.selectedIndex].text; cell2.innerHTML = "<select name='turnoSelect' id='turnoSelect' onchange='FUNCAOASERDEFINIDA()'>" + " <option id='turnoSelect.opt1' name='turnoSelect.opt1' value='M'>Manh&atilde;</option>" + " <option id='turnoSelect.opt1' name='turnoSelect.opt1' value='T'>Tarde</option>" + "</select>"; cell3.innerHTML = "<select name='horaSelect' id='horaSelect'>" + " <option id='horaSelect.opt1' name='horaSelect.opt1' value='07:00:00'>7:00</option>" + " <option id='horaSelect.opt2' name='horaSelect.opt2' value='08:00:00'>8:00</option>" + " <option id='horaSelect.opt3' name='horaSelect.opt3' value='10:30:00'>10:30</option>" + " <option id='horaSelect.opt4' name='horaSelect.opt4' value='13:15:00' disabled=true>13:15</option>" + " <option id='horaSelect.opt5' name='horaSelect.opt5' value='15:00:00' disabled=true>15:00</option>" + "</select>"; cell4.innerHTML = "<input id='qtdAtendimento' type='text' size='10'></input>"; cell5.innerHTML = "<input type=\"button\" value=\"Delete\" onclick=\"deleteRow(this, '" + idTable +"', '" + idOption + "')\">"; }

tipo assim … quando eu mudar o select do turno de manha para tarde ele vai ter que desabilitar os horarios da manha e habilitar os da tarde, e quando eu setar manha novamente o inverso deve acontecer. pode me dar uma luz de como eu faco isso?

edit:

deixa soh eu explicar melhor essa funcao ta num arquivo .js soh com funcoes javascript …e tipo assim aquela funcao a ser definida nao esta nem sendo chamada quando eu coloquei uma funcao de teste. tentei colocar uma FUNCAOASERDEFINIDA soh dando um alert e ele nao exibe nada.

T
tecdanilo

De uma forma rudimentar:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Teste para apagar todas as linhas de uma tabela&lt;/title&gt;
&lt;script language="javascript" type="text/javascript"&gt;
	function show(_id){
		document.getElementById(_id).style.display='';
	}
	function hide(_id){
		document.getElementById(_id).style.display='none';
	}
	
&lt;/script&gt;
&lt;/head &gt;

&lt;body&gt;
		
		&lt;input  type="button" value="matutino" onclick="show('matu'); hide('vesp');"/&gt;
		&lt;input  type="button" value="vespertino" onclick="hide('matu'); show('vesp');"/&gt;
		
		&lt;select&gt;
			&lt;optgroup id="matu"&gt;
				&lt;option&gt;7:00&lt;/option&gt;
				&lt;option&gt;8:00&lt;/option&gt;
				&lt;option&gt;9:00&lt;/option&gt;
			&lt;/optgroup&gt;
			&lt;optgroup id="vesp"&gt;
				&lt;option&gt;13:00&lt;/option&gt;
				&lt;option&gt;14:00&lt;/option&gt;
				&lt;option&gt;15:00&lt;/option&gt;
			&lt;/optgroup&gt;

		&lt;/select&gt;
&lt;/body&gt;
&lt;/html&gt;

Quando tiver dúvidas de javascript e HTML pesquisa nesse endereço:

http://www.w3schools.com/

Té+!

V
vimieiro

Amigo Rollei, estou com um problema parecido e estou tentando pegar uma Linha especifica e deletá-la.

No Seu código (1º) como vc passa do HTML o Row para seu JS ?

Como ele vem ?

abs

Vimieiro

V
vimieiro

amigo Kd vc ?

R
rollei

vlw ae pela ajuda. vimi me mandou uma msg que eu nao tinha visto, mas eu jah respondi ele com uma msg privada. deu certo ae?

V
vimieiro

Não :frowning: :frowning: :frowning: tá foda

engraçado que ja tentei de várias formas e o seu script foi o unico que funcionou ±

Eu tenho que clicar na linha 2 vezes para ele deletar !!!

Não sei o que pode estar acontecendo !

Pois eu deleto o registro via AJAX e depois chamo a função para deletar a linha !

tô apanhando demais da conta

vimieiro

D
diogosantana

Para quem não conhece, tem umas framework para JavaScript que ajudam muito a escrever códigos que funcionem em vários browsers, além de ajudar em tarefas trabalhosas.
Aconselho o Prototype: http://www.prototypejs.org/

V
vimieiro

Amigos

Depois de (acreditem) 2 dias tentando solucionar este problema consegui
fazer funcionar vejam :

Eu estava tentando lá no HTML fazer assim :

<td width="10%"><a href="#">
<img src="${pageContext.request.contextPath}/images/excluir16.gif" 
border="0" onclick="acaoFone('excluir','<c:out 
value="${telefone.tipoFone}"/>',this.parentNode.parentNode.rowIndex,'tabFone')"/></a></td>

Ai ele excluia hora sim hora não, era como se ele tivesse se perdendo o
Index !

Ae troquei o tipo do objeto para :

<td><input type="image" 
src="${pageContext.request.contextPath}/images/excluir16.gif" 
onclick="acaoFone('excluir','<c:out 
value="${telefone.tipoFone}"/>',this.parentNode.parentNode.rowIndex,'tabFone')"></td>

ou seja <img src= … NAO FUNCIONA !!!

Com input type =“image” CONSEGUI FAZER FUNCIONAR !!!

Fica esta para nossa lista de erros !!!

abs

Vimieiro

A
adrieldri

desculpa intromisao eu analisei oprimeiro codigo postado e ele mostra somente o numero da linha que citei eu gostaria de saber se possui um codigo que me mostre somente as ultimas 3 linhas da tabela soh isso

tabela contem 10 linhas

Criado 26 de março de 2008
Ultima resposta 22 de mai. de 2009
Respostas 12
Participantes 5

Topicos relacionados

Esconder caminho do browser 10 respostas Paginacao de lista em jsp 7 respostas Upload usando JSF 6 respostas Requisição AJAX em aplicação ASP NET MVC? 5 respostas Class panel do bootstrap não funciona 1 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo