JS基础13-DOM访问表格子元素的常用属性和方法

一、DOM访问表格子元素的常用属性和方法如下：

 

caption

返回表格的标题对象

rows

返回该表格里的所有表格行(数组)

tbodies

返回该表格里所有<tbody.../>元素组成的数组

tfoot

返回该表格里所有<tfoot.../>元素

thead

返回该表格里所有<thead.../>元素

二、通过rows[index]返回表格指定的行所对应的属性：

 

 

cells

返回该表格行内所有的单元格组成的数组

rowIndex

返回该表格行在表格内的索引值

sectionRowIndex

返回该表格行在其所在元素（tbody，thead等元素）的索引值

三、通过cells[index]返回表格指定的列所对应的属性：

 

cellIndex

返回该单元格在表格行内的索引值

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM访问表格子元素的常用属性和方法</title>
<style>
    #t,tr,td{
        border: 1px solid black;
    }
    </style>
</head>

<body>
<table id="t" border="1px">
<caption>甲骨文练习</caption>
    <tr>
        <td>HTML</td>
        <td>JavaScript</td>
    </tr>
    <tr>
        <td>JavaSE</td>
        <td>Oracle</td>
    </tr>
    <tr>
        <td>MySQL</td>
        <td>Struts2</td>
    </tr>
</table><br>
<input type="button" value="表格标题" onClick="show(test.caption)">
<input type="button" value="第一行、第一格" onClick="show(test.rows[0].cells[0])">
<input type="button" value="第二行、第二格" onClick="show(test.rows[1].cells[1])">
<input type="button" value="第三行、第二格" onClick="show(test.rows[2].cells[1])"><br>
设置指定单元格的值：
第<input type="text" id="r">行，第<input type="text" id="c">列的值为<input type="text" id="q"><input type="button" value="修改"  onClick="update()">
<script type="text/javascript">
    var test=document.getElementById('t');
    function show(dan){
        alert(dan.innerHTML);
    }
    function update(){
        var a1=document.getElementById('r').value;//用户输入的行
        var a2=document.getElementById('c').value;
        var a3=document.getElementById('q').value;
        test.rows[a1-1].cells[a2-1].innerHTML=a3;
    }
    </script>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

posted @ 2018-03-26 23:11  LuckyGJX  阅读(232)  评论(0)  编辑  收藏  举报