下面我来详细讲解如何使用JavaScript与DOM组合动态创建表格实例。
简介
在Web开发中，表格是数据展示的常用形式之一，但是在页面中手动编写表格代码比较繁琐，因此我们可以使用JavaScript与DOM结合创建表格。
创建表格的步骤
1.创建表格元素
首先需要使用JavaScript创建表格元素，可以使用document.createElement方法创建表格元素。如下所示：
var table = document.createElement('table');
这段代码会创建一个table元素。
2.创建表头
接下来需要创建表头，可以使用insertRow方法创建表格行元素，再使用insertCell方法创建单元格元素，然后添加到表头行中。如下所示：
var headRow = table.insertRow(0); // 创建表头行元素
var th1 = document.createElement('th'); // 创建表头单元格元素
th1.innerHTML = 'ID'; // 设置单元格内容
headRow.appendChild(th1); // 添加到表头行中
var th2 = document.createElement('th');
th2.innerHTML = '姓名';
headRow.appendChild(th2);
var th3 = document.createElement('th');
th3.innerHTML = '年龄';
headRow.appendChild(th3);
这段代码会创建一个表格，表头包含3个单元格（ID、姓名、年龄）。
3.插入数据
最后需要插入数据，可以使用insertRow方法创建行元素，然后使用insertCell方法创建单元格元素，再设置单元格内容，最后添加到行中即可。如下所示：
for (var i = 0; i < data.length; i++) { // data为数据数组
var row = table.insertRow(-1); // 创建数据行元素
var cell1 = row.insertCell(0); // 创建单元格元素
cell1.innerHTML = data[i].id; // 设置单元格内容
var cell2 = row.insertCell(1);
cell2.innerHTML = data[i].name;
var cell3 = row.insertCell(2);
cell3.innerHTML = data[i].age;
}
这段代码会将数据数组中的数据插入到表格中。
示例
下面通过两个示例演示如何使用JavaScript与DOM结合创建表格。
示例一：静态数据表格
首先创建一个HTML页面，然后在页面中添加一个按钮和一个用于展示表格的div。当用户点击按钮时，会在div中动态创建一个表格，并将静态数据插入到表格中。
HTML代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>示例一：静态数据表格</title>
</head>
<body>
<button onclick="createTable()">创建表格</button>
<div id="table-container"></div>
</body>
</html>
JavaScript代码如下：
function createTable() {
var data = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 25},
{id: 4, name: '赵六', age: 30}
];
var container = document.getElementById('table-container');
var table = document.createElement('table');
container.appendChild(table);
var headRow = table.insertRow(0);
var th1 = document.createElement('th');
th1.innerHTML = 'ID';
headRow.appendChild(th1);
var th2 = document.createElement('th');
th2.innerHTML = '姓名';
headRow.appendChild(th2);
var th3 = document.createElement('th');
th3.innerHTML = '年龄';
headRow.appendChild(th3);
for (var i = 0; i < data.length; i++) {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = data[i].id;
var cell2 = row.insertCell(1);
cell2.innerHTML = data[i].name;
var cell3 = row.insertCell(2);
cell3.innerHTML = data[i].age;
}
}
当用户点击按钮时，会创建一个表格，并将静态数据插入到表格中。
示例二：动态数据表格
首先创建一个HTML页面，然后在页面中添加一个输入框和一个用于展示表格的div。当用户输入文本时，会按照文本内容查询数据，并将查询结果动态展示在表格中。
HTML代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>示例二：动态数据表格</title>
</head>
<body>
<input type="text" id="query-input" placeholder="请输入查询内容">
<button onclick="query()">查询</button>
<div id="table-container"></div>
</body>
</html>
JavaScript代码如下：
var data = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 25},
{id: 4, name: '赵六', age: 30}
];
function query() {
var queryText = document.getElementById('query-input').value;
var queryResult = [];
for (var i = 0; i < data.length; i++) {
if (data[i].name.indexOf(queryText) >= 0) {
queryResult.push(data[i]);
}
}
var container = document.getElementById('table-container');
container.innerHTML = '';
if (queryResult.length > 0) {
var table = document.createElement('table');
container.appendChild(table);
var headRow = table.insertRow(0);
var th1 = document.createElement('th');
th1.innerHTML = 'ID';
headRow.appendChild(th1);
var th2 = document.createElement('th');
th2.innerHTML = '姓名';
headRow.appendChild(th2);
var th3 = document.createElement('th');
th3.innerHTML = '年龄';
headRow.appendChild(th3);
for (var i = 0; i < queryResult.length; i++) {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = queryResult[i].id;
var cell2 = row.insertCell(1);
cell2.innerHTML = queryResult[i].name;
var cell3 = row.insertCell(2);
cell3.innerHTML = queryResult[i].age;
}
} else {
container.innerHTML = '查询结果为空';
}
}
当用户输入内容并点击查询按钮时，会动态生成表格，并将查询结果插入到表格中。
以上就是使用JavaScript与DOM结合动态创建表格的完整攻略，希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript与DOM组合动态创建表格实例 - Python技术站
微信扫一扫 
支付宝扫一扫 