Table的两个属性rowIndex与cellIndex

rowIndex用于判断当前单元格所处行的索引(从0开始)
cellIndex用于判断当前单元格所处列的索引(从0开始)

通常我们可以把他们的事件写在TD里,因为rowIndex属性应该是属于<tr>标记,因此在判断rowIndex需要访问父节点,示例如下:

 

<table align="center" width="100%" height="400" cellspacing="1" border="1" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#C0C0C0" bgcolor="#C0C0C0">
  <tr>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
  </tr>
  <tr>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
  </tr>
  <tr>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">&nbsp;</td>
  </tr>
</table>

 

你可能感兴趣的:(table)