Capítulo 13

Propriedades do objeto tr

JavaScript

<script type="text/javascript">
window.onload = function () {
var el, linha, msg, btnPropriedades, mensagem; 
	el = document.getElementById("tabela");
	linha = document.getElementById("linha")
	msg = document.getElementById("msg");
	btnPropriedades = document.getElementById("btnprop");	
	mensagem = "<h3>Propriedades do elemento <code>tr</code></h3>";
	mensagem += "<ul>";
	mensagem += "<li>align: " + el.rows[0].align + "</li>";
	mensagem += "<li>valign: " + el.rows[0].vAlign + "</li>";
	mensagem += "<li>qde. células: " + el.rows[1].cells.length + "</li>";
	mensagem += "<li>rowIndex: " + linha.rowIndex + "</li>";
	mensagem += "<li>sectionRowIndex: " + linha.sectionRowIndex + "</li>";
	mensagem += "</ul>";
	
	btnPropriedades.onclick	= function() {
		msg.innerHTML = mensagem;
	}
}
<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 row
  </caption>
<thead>
  <tr align="center" valign="baseline">
    <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 id="linha">
    <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 />
<div id="msg"></div>
<button type="button" id="btnprop">Inspecionar propriedades</button>
...
Tabela demonstração row
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