码迷,mamicode.com
首页 > Windows程序 > 详细

HTML中Table的两个属性rowIndex与cellIndex

时间:2014-11-05 14:44:55      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:io   color   ar   java   sp   div   on   cti   bs   

HTML DOM rowIndex属性

 

功能:返回表格中行的序号。

语法:object.rowIndex

 

说明:该属性只读。

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

 

实例1

 

获取指定行在表格中的序号。

<table width="80%" border="1" cellpadding="0" cellspacing="0" bordercolor="blue">
<thead>
<tr><td>1</td><td>2</td></tr>
</thead>
<tbody>
<tr id="rr"><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td></tr>
</tbody>
</table>

<div>
<script type="text/javascript">
document.write( document.getElementById("rr").rowIndex );
</script>
</div>

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

<script type="text/javascript">
    function demo(elem){
        var tr = elem.parentNode;
        alert(tr.rowIndex);
    }
</script>
<table>
    <tr>
        <td></td>
        <td onclick="demo(this);">edit</td>
    </tr>
    <tr>
        <td></td>
        <td onclick="demo(this);">edit</td>
    </tr>
</table>

 

 

cellIndex属性

功能:返回单元格在行中的位置。

语法:object.cellIndex

说明:该属性只读。

cellIndex用于判断当前单元格所处列的索引(从0开始)
实例2
获取指定单元格在行中的位置。
<table id="mytable" width="80%" border="1" cellpadding="0" cellspacing="0" bordercolor="blue">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td id="tt">6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

<div>
<script type="text/javascript">
document.write( document.getElementById("tt").cellIndex );
</script>
</div>

 

 

rowIndex属性的值是行在表格中总的位置,包含了thead、tbody、tfoot各个区域。

HTML中Table的两个属性rowIndex与cellIndex

标签:io   color   ar   java   sp   div   on   cti   bs   

原文地址:http://www.cnblogs.com/xiaosen992608/p/4076238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!