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

Posted LuckyGJX

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS基础13-DOM访问表格子元素的常用属性和方法相关的知识,希望对你有一定的参考价值。

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

 

caption

返回表格的标题对象

rows

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

tbodies

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

tfoot

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

thead

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

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

 

 

cells

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

rowIndex

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

sectionRowIndex

返回该表格行在其所在元素(tbodythead等元素)的索引值

三、通过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>

 

 

 

 

 

 

 

 

 

 

以上是关于JS基础13-DOM访问表格子元素的常用属性和方法的主要内容,如果未能解决你的问题,请参考以下文章

html dom中windows对象的4个常用子对象

js中,dom元素和节点的区别

Highcharts的常用属性及导出SVG

js 表格表单元素尺寸和位置

JS-DOM Element方法和属性

JS-DOM Element方法和属性