码迷,mamicode.com
首页 > Web开发 > 详细

HTML的Table 对象

时间:2019-08-21 15:12:09      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:ack   fun   let   alt   cells   asp   input   closed   new   

一、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

HTML的Table 对象

标签:ack   fun   let   alt   cells   asp   input   closed   new   

原文地址:https://www.cnblogs.com/ltf234/p/11388825.html

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