动态创建表格

最新推荐文章于 2022-02-26 17:23:13 发布

文盗任情

最新推荐文章于 2022-02-26 17:23:13 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript CSS HTML dom 动态创建表格

本文链接：https://blog.youkuaiyun.com/Qianqianliuliu/article/details/78368840

本文介绍如何使用JavaScript动态创建带有特定行列数的表格，并实现隔行变色的效果。通过DOM操作，根据用户输入的行数和列数，利用双重循环创建表格元素并追加到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：动态创建指定行数与列数的表格，实现表格隔行变色功能。

一、DOM元素能够在 JavaScript 中实现对文档中元素的添加、修改、删除、克隆、查询等操作；

创建元素：
var element = document.createElement("tagname");
添加属性：
a. element.setAttribute("name", "value");
b. element.<attributeName> = value;
注意：class 与 className
获取属性：
a. element.getAttribute("name");
b. element.<attibuteName>
内部内容：
a. element.innerHTML -- 内部HTML文本
b. element.innerText -- 内部纯文本
添加到某个容器中：
a. parentNode.appendChild(childNode); -- 追加到父容器末尾
b. parentNode.insertBefore(newNode, existNode); -- 将 newNode 所表示节点添加到父容器中已有节点 existNode 之前

二、思路

创建table元素，获取文本框你想要设置的行数、列数值，利用双重循环，创建tr,td元素，并追加到父元素中。

三、效果图

四、代码实现

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.main{
margin:70px;
}
table{
height: 500px;
width: 800px;
background: #ccc;
border-collapse: collapse;

}
table td{
border: 1px solid;
text-align: center;
}
table tr:nth-child(2n){
background: lightblue;

}
</style>
</head>
<body>
<input type="text" id="row" value="5" />行
<input type="text" id="col" value="6"/>列
<button id="btn">创建表格</button>
<div class="main"></div>

<script type="text/javascript">
document.getElementById("btn").onclick = function(){
var _row =document.getElementById("row").value,
_col = document.getElementById("col").value;
var _table = document.createElement("table");
for(var i=0;i<_row;i++){
var rows = document.createElement("tr");
for(var j=0;j<_col;j++){
var cols = document.createElement("td");
cols.innerHTML=23;
rows.appendChild(cols);
}
_table.appendChild(rows);
}
document.getElementsByClassName("main")[0].appendChild(_table);
}
</script>

</body>
</html>