JS中的DOM---表格对象

最新推荐文章于 2022-04-19 12:32:23 发布

weixin_34186931

最新推荐文章于 2022-04-19 12:32:23 发布

阅读量155

点赞数

原文链接：http://www.cnblogs.com/yingyingh5/p/7731701.html

版权

[表格对象]
1、 rows属性：返回表格中的所有行，是一个数组格式；
2、 insertRow(index): 在指定位置插入一行，index从0开始；后面括号里面的数字表示在第几行插入
3、 deleteRow(index): 删除指定的一行，index从0开始；

[行对象]
1、 cells属性：返回这一行中的所有单元格，是一个数组格式；
2、 rowIndex属性：返回这一行是表格中的第几行，从0开始；
3、 insertCell(index): 在这一行指定位置，插入一个单元格，index从0开始，index表示索引；
4、 deleteCell(index): 删除这一行的指定单元格，index从0开始

[单元格对象]
1、 cellIndex属性：返回这个单元格是本行的第几个，从0开始；
2、 innerText innerHTML align className

eg：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
　　.ccy {
　　　　text-align: center;
　　　　font-weight: bold;
　　　　color: red;
　　}
</style>
</head>
<body>
　　<table border="1" width="300">
　　　　<tr>
　　　　　　<td>书名</td>
　　　　　　<td>价格</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>看得见风景的房间</td>
　　　　　　<td>30</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>60个瞬间</td>
　　　　<td>32</td>
　　　　　　</tr>
　　</table>
　　<button οnclick="addRow()">增加一行</button>
　　<button οnclick="deleteSecondRow()">删除第二行</button>
　　<button οnclick="changeTitleStyle()">修改标题样式</button>
　　<button οnclick="copyLastRow()">复制最后一行</button>

</body>

<script>
　　　　/*HTML DOM 和 Core DOM的区别：
　　　　 HTML DOM在执行相关插入元素方法的同时创建了相应的元素。*/
　　function addRow() {
　　　　var table = document.getElementsByTagName("table")[0];
　　　　var tr = table.insertRow(1);
　　　　var td1 = tr.insertCell(0);
　　　　td1.innerHTML = "幸福从天而降";
　　　　var td2 = tr.insertCell(1);
　　　　td2.innerHTML = "¥30"
　　}
　　function deleteSecondRow() {
　　　　document.getElementsByTagName("table")[0].deleteRow(1);
　　}
　　function changeTitleStyle() {
　　　　document.getElementsByTagName("table")[0].rows[0].className = "ccy";

　　}

　　function copyLastRow() {
　　　　var length = trs.length;

　　　　var lastRow = trs[length - 1];

　　　　var newEle = lastRow.cloneNode(true);
　　　　table.children[0].appendChild(newEle)

　　}
</script>
</html>

上面的代码程序是对于表格的一个解释练习，显示效果为：

当点击按钮增加一行时，显示为：（多次点击按钮，添加多行）

当点击按钮删除第二行时，显示为：（删除第二行）

当点击修改标题样式时，显示为：

转载于:https://www.cnblogs.com/yingyingh5/p/7731701.html

weixin_34186931

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的DOM---表格对象

[表格对象]1、 rows属性：返回表格中的所有行，是一个数组格式；2、 insertRow(index): 在指定位置插入一行，index从0开始；后面括号里面的数字表示在第几行插入3、 deleteRow(index): 删除指定的一行，index从0开始；[行对象]1、 cells属性：返回这一行中的所有单元格，是一个数组格式；2、 rowIndex属性：返回这...
复制链接

扫一扫