Aumentar tabela sem precisar selecionar o id manual.
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>Discussão (1)
Carregando comentários...