网页编程 - Table属性rowIndex与cellIndex

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

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

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

示例如下:看一下文中与CSS中的expression相结合

<style type="text/css">

table{myalign:expression(this.align="center");}

tr{ background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2])}

td{ color:expression('red,blue'.split(',')[cellIndex%2])}

</style>

<table align="center" width="400" border="0">

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td onclick="alert('行:'+(this.parentNode.rowIndex+1)+'列:'+(this.cellIndex+1))">点这里看一下</td>

    <td>看这里</td>

    <td>看这里</td>

    <td>看这里</td>

  </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

    <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>