Increase table without needing to select manual id.

Question

Increase table without needing to select manual id.

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, I want to do the following I have a table that I hide the part I want but in the java script I'm hiding what I want if I select the id of the table part but I want to do next ro when clicking more or less it will decrease or increase without having to select the 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>

javascript

asked by anonymous 18.01.2016 / 14:53

2 answers

1

Let me see if I understood your question, you want to increase and decrease without having to select the table id because it will have more than one table and more than one set of buttons to increase and decrease and so you need a selector that does not search by ID, is this or more or less this? If it is, you can group the table and the buttons inside a same container, and in the function that you execute when the onclick event occurs you can pick up the table from the element that was clicked, in your example you can change the onclick to pass the this parameter, and in its function get the table according to the last parameter using the parentElement attribute and the getElementByTagName function.

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

...

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

But honestly, I think you should write your code, if you do not want to use jQuery you could use at least the addEventListener for your elements, this makes your code easier to read, maintain, edit and save you work. >

18.01.2016 / 17:02

Error connecting BD tables Is there a way to join multiple SELECTS in just one query?

score 0 · Accepted Answer

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>