HTML的Table 对象

一、Table 对象集合

1.rows能获取行，cells是获取列

<html>
<head>
<script type="text/javascript">
function showRow(){
　　var table=document.getElementById('myTable');//获取table对象
　　alert(table.rows[0].innerHTML);//输出  <td>Row1 cell1</td>
　　　　　　　　　　　　　　　　　　　　//　　　<td>Row1 cell2</td>
　　alert(table.rows[0].cell[0].innerHTML);//输出 Row1 cell1
}
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="showRow()" value="Show innerHTML">

</body>
</html>
View Code

 2.insertRow()能够添加行，deleteRow()能够删除列

<html>
<head>
<script type="text/javascript">
function insRow(){
    var table=document.getElementById('myTable')
    table.insertRow(0)//添加行
    table.deleteRow(0)//删除行
}
</script>
</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="Insert new row">

</body>
</html>
View Code

参考：https://www.w3school.com.cn/jsref/dom_obj_table.asp

posted on 2019-08-21 15:03  刘三儿a  阅读(167)  评论(0)    收藏  举报

导航