JavaScript中的表格对象

最新推荐文章于 2024-10-01 19:00:00 发布

IUNIQUE

最新推荐文章于 2024-10-01 19:00:00 发布

阅读量1.2k

点赞数

分类专栏： Javascript 文章标签： javascript html 对象标签

本文链接：https://blog.csdn.net/IUNIQUE/article/details/52787081

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在网页中我们可能会经常看到用表格做出来的东西，我们有时候可能要对表格进行操作，当然我们可以通过DOM获得表格对象后对其子节点进行操作，但是大家可能都知道有一种简单方法，那就是DOM中的文档对象，也就是获得表格对象后进而获得某个行对象或者某个单元格对象。

一、表格对象
只要html中写了一个table标签，就相当于new了一个表格对象
1、表格对象的属性有border、width、height………,可以通过table对象.属性获取到属性值；
2、获得表格对象

<html>
<head>
<head>表格对象</head>
<meta http-equiv="content-Type" content="text/html;charset:gb2312"/>
<script type="text/javaScript">
 function getTabel(){//定义Js方法获得表格对象
  var tab = document.getElementById("Tab");
  alert("tab.tagName");
 }
</script>
</head>
<body>
<table id="Tab" border="1" cellpadding="0" cellspaceing="0" >//一个两位学生的语文和数学成绩表id为Tab；
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>80</td>
</tr>
<tr>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td rowspan="3">李四</td>
<td>语文</td>
<td>89</td>
</tr>
<tr>
<td>数学</td>
<td>90</td>
</tr>
</table>
<input type="button" value="点击获得表格对象标签名测试" onclick="getTable()"/>
</body>
</html>

3、表格对象的有关数组:
tab.rows[下标]；本表格的行数组
tab.rows[0]； tab的第一行
tab.rows.length； tab的行数
tab.rows[tab.rows.length-1]； tab最后一行
★tr.rowIndex；返回本行的下标

4、表格对象的有关方法：
增加一行：var tr = tab.insertRow(index);在index下标之前插入一行得到一个tr对象，或者说row对象;
删除一行：tab.deleteRow(index); 删除index下标对应的行;

5、表格对象中的单元格对象：
属性数组:
tab.rows[index].cells[]；
rowObj.cells.length；行的单元格个数
rowObj.cells[0]；第一个单元格
rowObj.cells[rowObj.cells.length-1]；最后一个单元格
方法:
增加一格:var td = row.insertCell(index)；在index下标之前插入一格
得到一个td对象，或者说单元格对象
删除一格: row.deleteCell(index)；删除index对应的单元格