您的位置：首页 > Web前端 > JavaScript

动态创建表格

2017-10-27 20:31 169 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

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

相关文章推荐

新的分享

章节导航