0

bom dia, quero fazer o seguinte tenho uma tabela que oculto a parte que quero mas no java script eu so oculto o que quero se eu selecionar o id da parte da tabela mas eu quero faze ro seguinte quando clicar em mais ou menos ele vai diminuir ou aumentar sem precisar eu selecionar o id.

<html>

<body>
<script>
		//Manipulando as linhas
		function ocultaRow (rowIndex) {
			var table = document.getElementById('tabela1');
			table.rows[rowIndex].style.display = 'none';
		}

		function mostraRow (rowIndex) {
			var table = document.getElementById('tabela1');
			table.rows[rowIndex].style.display = '';
		}
		
		//Manipulando as colunas
		function ocultaColumn (colIndex) {
			var table = document.getElementById('tabela1');
			for (var r = 0; r < table.rows.length; r++)
				table.rows[r].cells[colIndex].style.display = 'none';
		}
		function mostraColumn (colIndex) {
			var table = document.getElementById('tabela1');
			for (var r = 0; r < table.rows.length; r++)
				table.rows[r].cells[colIndex].style.display = '';
		}
	</SCRIPT>

	<FORM>
		Manipular Linhas
		<SELECT NAME="rowIdx">
		<script>
			for (var i = 1; i <= 4; i++)
				document.write('<OPTION VALUE="' + i + '">' + i);
		</SCRIPT>
		</SELECT>
		<INPUT TYPE="button" VALUE="- " ONCLICK="ocultaRow(this.form.rowIdx.selectedIndex);">
		<INPUT TYPE="button" VALUE="+" ONCLICK="mostraRow(this.form.rowIdx.selectedIndex);">
	</FORM>
	
	<FORM>
		Manipular Colunas
		<SELECT NAME="colIdx">
		<script>
			for (var i = 1; i <= 4; i++)
				document.write('<OPTION VALUE="' + i + '">' + i);
		</SCRIPT>
		</SELECT>
		<INPUT TYPE="button" VALUE="-" ONCLICK="ocultaColumn(this.form.colIdx.selectedIndex);">
		<INPUT TYPE="button" VALUE="+" ONCLICK="mostraColumn(this.form.colIdx.selectedIndex);">
	</FORM>
	
	<table width="100%"  border="1" id="tabela1">
		<tr id="1">
		  <td>Linha1 coluna 1</td>
			<td>Linha2 coluna 2</td>
			<td>Linha3 coluna 3</td>
			<td>Linha4 coluna 4</td>
		</tr>
		<tr id="2">
		  <td>nada2</td>
			<td>LINHA 2</td>
			<td>TESTE 2</td>
			<td>TESTE 2</td>
		</tr>
		<tr id="3">
		  <td>nada3</td>
			<td>LINHA 3</td>
			<td>TESTE 3</td>
			<td>TESTE 3</td>
		</tr>
		<tr id="4">
		  <td>nada4</td>
			<td>LINHA 4</td>
			<td>TESTE 4</td>
			<td>ddd</td>
		</tr>
         <tr>
		  <td >	0</td>
    <td>0</td>
    <td>0</td>
    <td>dd</td>
	  </tr>
	</table>

</body>
</html>

6
  • Qual é a diferênça de funcionalidade entre os selects e o + e -? Não percebo bem como devem funcionar, ou o que devem fazer diferente.
    – Sergio
    18/01/2016 às 13:58
  • eu manipulo a coluna e linha da tabela o + para acrescentar linha ou coluna e o _ para diminuir linha ou coluna o problema é que eu n quero selecionar manual queria que ele fizesse isso ao clicar no mais ou menos.
    – Gezer
    18/01/2016 às 14:01
  • Mas qual é a relação entre o select e esses butões? Quando carregas no + ele adiciona uma linha (no fim, no meio ou no sitio que o select indica?)
    – Sergio
    18/01/2016 às 14:03
  • isso mesmo adicionar em qualquer ponto da tabela mas n quero isso prefiro que seja automático 1 por um. mas ja tentei e sempre da erro.
    – Gezer
    18/01/2016 às 14:05
  • Cheguei agora a casa e posso dar mais uma olhada aqui. Importas-te de explicar mais uma vez ainda a funcionalidade de cada componente? Por exemplo: mudanço o select deve acontecer X clicando no + deve acontecer Y. A ver se fica claro para eu poder ajudar/responder.
    – Sergio
    18/01/2016 às 16:44

2 Respostas 2

1

Deixa eu ver se eu entendi a sua pergunta, você quer aumentar e diminuir sem ter que selecionar o id da tabela pois terá mais que uma tabela e mais de um conjunto de botões para aumentar e diminuir e por isso precisa de um seletor que não busque pelo ID, é isto ou mais ou menos isto ? Se for, você pode agrupar a tabela e os botões dentro de um mesmo container, e na função que você executa quando o evento onclick ocorre você pode pegar a tabela de forma relativa ao elemento que foi clicado, no seu exemplo você pode alterar o onclick para passar o parametro this, e na sua função pegar a tabela de acordo com o parametro passado utilizando o atributo parentElement e a função getElementByTagName.

function ocultaRow (_self) { 
    var table = self.parentElement.parentElement.getElementsByTagName("table"));
    table.rows[rowIndex].style.display = 'none';
}

...

<INPUT TYPE="button" VALUE="- " ONCLICK="ocultaRow(this);">

Mas sinceramente, acho que você deveria escrever seu codigo, se não quiser utilizar jQuery poderia utilizar pelo menos o addEventListener para teus elementos, isto deixa seu codigo mais facil de ler, manter, editar como também te poupa trabalho.

1
  • consegui resolver amigo era quase isso rs refiz o codigo agora ficou top.
    – Gezer
    18/01/2016 às 17:13
0

var contador=0; 

function incrementarlinha() { 
if(contador==8) 
alert('Maximo permitido alcanzado: 9'); 
else { 
contador++; 
			var table = document.getElementById('tabela1');
			table.rows[contador].style.display = '';
} 
} 
function decrementarlinha() { 
if(contador==0) 
alert('Minimo Permitido: 0'); 
else { 
			var table = document.getElementById('tabela1');
			table.rows[contador --].style.display = 'none';
}
}
// manipular coluna off
 var contadorcoll= 0;
 function incrementarcoluna(){
	 if(contadorcoll==3) 
	 alert('Maximo permitido alcanzado: 3'); 
	 else
	 {
	contadorcoll++;	 
	
	var table = document.getElementById('tabela1');
			for (var r = 0; r < table.rows.length; r++)
				table.rows[r].cells[contadorcoll].style.display = '';
	 }
 }

 function decrementarcoluna(){
if(contadorcoll==0)	
alert('Minimo Permitido: 0'); 
else{
	var contadorcolls = contadorcoll--;
	var table = document.getElementById('tabela1');
			for (var r = 0; r < table.rows.length; r++)
				table.rows[r].cells[contadorcolls].style.display = 'none';
}
 } 
	
	<table width="100%"  border="1" id="tabela1">
		<tr id="1">
		  <td width="30%">Linha1 coluna 1</td>
			<td width="30%" style="display: none;">LINHA 1 coll 2</td>
			<td width="29%" style="display: none;">LINHA 1 coll 3			</td>
			<td width="11%" style="display: none;">LINHA 1 coll 4</td>
		</tr>
		<tr id="2" style="display: none;">
		  <td>nada2</td>
		  <td style="display: none;">LINHA 2 coll 2</td>
			<td style="display: none;">LINHA 2 coll 3</td>
			<td style="display: none;">LINHA 2 coll 4</td>
		</tr>
		<tr id="3" style="display: none;">
		  <td>nada3</td>
		  <td style="display: none;">LINHA 3 coll 2</td>
			<td style="display: none;">LINHA 3 coll 3</td>
			<td style="display: none;">LINHA 3 coll 4</td>
		</tr>
		<tr id="4" style="display: none;" >
		  <td>nada4</td>
		  <td style="display: none;">LINHA 4 coll 2</td>
		<td style="display: none;">LINHA 4 coll 3</td>
			<td style="display: none;">LINHA 4 coll 4</td>
		</tr>
        <tr id="5" style="display: none;" >
		  <td>nada5</td>
		  <td style="display: none;">LINHA 5 coll 2</td>
			<td style="display: none;">LINHA 5 coll 3</td>
			<td style="display: none;">LINHA 5 coll 4</td>
		</tr>
        <tr id="6" style="display: none;" >
		  <td>nada6</td>
		  <td style="display: none;">LINHA 6 coll 2</td>
			<td style="display: none;">LINHA 6 coll 3</td>
			<td style="display: none;">LINHA 6 coll 4</td>
		</tr>
        <tr id="7" style="display: none;" >
		  <td>nada7</td>
		  <td style="display: none;">LINHA 7 coll 2</td>
			<td style="display: none;">LINHA 7 coll 3</td>
			<td style="display: none;">LINHA 7 coll 4</td>
		</tr>
        <tr id="8" style="display: none;" >
		  <td>nada8</td>
		  <td style="display: none;">LINHA 8 coll 2</td>
			<td style="display: none;">LINHA 8 coll 3</td>
			<td style="display: none;">LINHA 8 coll 4</td>
		</tr>
        <tr id="9" style="display: none;" >
		  <td >nada9</td>
		  <td style="display: none;">LINHA 9 coll 2</td>
			<td style="display: none;">LINHA 9 coll 3</td>
			<td style="display: none;">LINHA 9 coll 4</td>
		</tr>
         <tr>
		  <td >	0</td>
   <td style="display: none;">LINHA 4</td>
   <td style="display: none;">nada4 linha nada 4</td>
			<td style="display: none;">nada4 linha nada 4</td>
	  </tr>
	</table>

<form name="caca"> 
<input type="button" onClick="decrementarlinha()" value="diminuirlinha"> 
<input type="button" onClick="incrementarlinha()" value="aumentarlinha"> 
<input type="button" onClick="decrementarcoluna()" value="diminuircoluna"> 
<input type="button" onClick="incrementarcoluna()" value="aumentarcoluna"> 

</form>  
   

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .