Jump to content
Sign in to follow this  
gezer

Aumentar tabela sem precisar selecionar o id manual.

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Problema resolvido.


<html>
<script language="JavaScript"> 
//manipular linha ok
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';
}
 }

</script> 
<body>
	
	<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>  
   

</body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By daviassumpcao
      Pessoal... estou iniciando estudos em JS e me deparei com um desafio: Preciso tratar um valor (string) para obter apenas número...  a primeira variável retorna NAN, as outras retornam corretamente. O que posso estar fazendo errado na variável "a" ... preciso que seja retornado "299,00" ... agradeço antecipadamente. 
       
      Segue código: 
       
      <p id="demo"></p> <script> var a = parseInt("R$ 299,00") + "<br>"; var b = parseInt("40 years") + "<br>"; var c = parseInt("10.00") + "<br>"; var n = a + b + c; document.getElementById("demo").innerHTML = n; </script>  
    • By violin101
      Caros amigos, saudações...
       
      Tenho uma rotina para mostrar ao usuário todos os produtos Relacionados com um determinado Produto.
       
      Exemplo:
      Caderno ---> relacionado com: lápis, borracha, caneta, apontador e etc.
       
      O problema que estou enfrentando é o seguinte:
      ==> o produto caderno se estiver relacionado com mais de 4 produtos não ocorre o erro.
       
      Quando mostro o relacionamento se o produto estiver relacionado com apenas 3 ou menos produto, o CAROUSEL fica repetindo o 1º ou 2º item.
       
      Como faço para isso não acontecer ?
       
      Abaixo posto como está o JavaScript.
      $(".produto_relaciona").owlCarousel({ loop: true, nav: true, items: 4, dots: false, navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], smartSpeed: 1200, autoplayTimeout: 5000, autoHeight: false, autoplay: true, responsive: { 0: { items: 1 }, 480: { items: 2 }, 768: { items: 3 }, 992: { items: 4 } } });  
       
      Grato,
       
      Cesar
    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
    • By carlosmassam
      Bom noite a todos.

      Eu tenho o seguinte código
       
      <input type="radio" id="radio01" name="radio01" value="radio01"> <input type="radio" id="radio02" name="radio02" value="radio02"> <input type="radio" id="radio03" name="radio03" value="radio03"> <input type="radio" id="radio04" name="radio04" value="radio04"> <input type="radio" id="radio05" name="radio05" value="radio05"> Este código me apresenta 5 radiobuttons distintos, um ao lado do outro. Eu gostaria que, ao clicar em um deles, desse check no radiobutton que eu cliquei e também em todos os radiosbuttons anteriores, e os radionbutton posteriores fossem "deschecado".
      Por exemplo: ao clicar no radio04, ele deve fichar com check, e os radio03, radio02 e radio01 também devem ficar com check, como o radio05 vem depois do radio04, ele não deve ser checado, então permanecerá como está.
      Mas se eu então clicar no radio02, os radio03 e radio04 devem mudar para "deschecado" e os radio02 e radio01 devem permanecerem checados.
    • By fideles
      Fala pessoal, tudo tranquilo?
       
      Venho recorrer a vós pois já não consigo mais.... 
       
      Tenho um campo select com algumas opções de nome.
      <select class="seleciona_nome"> <option value="Joao">Joao</option> <option value="Julio">Julio</option> <option value="Pedro">Pedro</option> </select>  
      E um campo input do tipo "text"
      <input type="text" class="opcaoSelect" autocomplete="off" disabled="disabled">  
      Preciso que ao selecionar uma opção do "Select" seja auto preenchido no input. Tenho um codigo que funcionava e não sei mais porque não funciona, veja abaixo;
       
      <script> $(document).ready(function(){ $('.seleciona_nome').on('change', addOption); }); function addOption(){ $('.opcaoSelect').val(this.value); } </script>  
      Peço ajuda ai caso alguém consiga me ajudar a entender porque este não funciona mais.
       
      Obrigado.
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.