Capítulo 13

Métodos do objeto table - Exemplo 2

JavaScript

<script type="text/javascript">
window.onload = function () {
var el, msg, btnDelCaption, btnInsCaption, btnDelRow, btnInsRow, linha, celula; 
	el= document.getElementById("tabela");
	btnDelCaption = document.getElementById("btndc");	
	btnInsCaption = document.getElementById("btnic");	
	btnDelRow = document.getElementById("btndl");	
	btnInsRow = document.getElementById("btnil");	
	
	btnDelCaption.onclick	= function() {
		el.deleteCaption(); 
	}
	
	btnInsCaption.onclick	= function() {
		el.createCaption().innerHTML = "Rótulo da Tabela inserido com JavaScript" ; 
	}

	btnDelRow.onclick	= function() {
		el.deleteRow(-1); 
	}
	
	btnInsRow.onclick	= function() {
		linha = el.insertRow(2); 
		for (var i=0; i<5; i++) {
		celula = linha.insertCell(i);
		celula.innerHTML = "inserida-" + i;
		}
	}
}
<script>

HTML

...
<table width="500" border="1" cellspacing="0" cellpadding="8" summary="Tabela com quatro linhas e cinco colunas sendo a primeira linha o cabeçalho" id="tabela">
  <caption align="top">
    Tabela demonstração Exemplo 2
  </caption>
<thead>
  <tr>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
    <th scope="col">célula</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td colspan="5">Rodapé</td>
   </tr>
</tfoot>
<tbody>
  <tr>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
  </tr>
  <tr>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
  </tr>
</tbody>
</table>
<br />
<button type="button" id="btndc">Remover caption</button>
<button type="button" id="btnic">Inserir caption</button>
<button type="button" id="btndl">Remover linha</button>
<button type="button" id="btnil">Inserir linha</button>
...
Tabela demonstração Exemplo 2
célula célula célula célula célula
Rodapé
célula célula célula célula célula
célula célula célula célula célula