js 创建一个table
在 JavaScript 中创建一个 HTML 表格（table）可以通过多种方式实现，以下是几种常见的方法：
方法一：使用 DOM 操作
你可以使用 JavaScript 动态地创建表格元素并添加到页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建表格</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="table-container"></div>
<script>
// 数据源
const data = [
{ name: 'Alice', age: 24, gender: 'Female' },
{ name: 'Bob', age: 28, gender: 'Male' },
{ name: 'Charlie', age: 22, gender: 'Male' }
];
// 创建表格元素
const table = document.createElement('table');
// 创建表头
const thead = document.createElement('thead');
const headerRow = document.createElement('tr');
Object.keys(data[0]).forEach(key => {
const th = document.createElement('th');
th.textContent = key.toUpperCase();
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表体
const tbody = document.createElement('tbody');
data.forEach(item => {
const row = document.createElement('tr');
Object.values(item).forEach(value => {
const td = document.createElement('td');
td.textContent = value;
row.appendChild(td);
});
tbody.appendChild(row);
});
table.appendChild(tbody);
// 将表格添加到页面中
document.getElementById('table-container').appendChild(table);
</script>
</body>
</html>方法二：使用字符串拼接
你也可以通过拼接 HTML 字符串来创建表格，然后将其插入到页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建表格</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="table-container"></div>
<script>
// 数据源
const data = [
{ name: 'Alice', age: 24, gender: 'Female' },
{ name: 'Bob', age: 28, gender: 'Male' },
{ name: 'Charlie', age: 22, gender: 'Male' }
];
// 创建表格字符串
let tableHTML = '<table>';
tableHTML += '<thead><tr>';
Object.keys(data[0]).forEach(key => {
tableHTML += `<th>${key.toUpperCase()}</th>`;
});
tableHTML += '</tr></thead>';
tableHTML += '<tbody>';
data.forEach(item => {
tableHTML += '<tr>';
Object.values(item).forEach(value => {
tableHTML += `<td>${value}</td>`;
});
tableHTML += '</tr>';
});
tableHTML += '</tbody></table>';
// 将表格添加到页面中
document.getElementById('table-container').innerHTML = tableHTML;
</script>
</body>
</html>方法三：使用模板引擎
如果你使用的是前端框架（如 React、Vue 等），可以使用相应的模板语法来创建表格。
Vue.js 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态创建表格</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th v-for="key in columns" :key="key">{{ key.toUpperCase() }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in data" :key="index">
<td v-for="value in row" :key="value">{{ value }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
columns: ['name', 'age', 'gender'],
data: [
{ name: 'Alice', age: 24, gender: 'Female' },
{ name: 'Bob', age: 28, gender: 'Male' },
{ name: 'Charlie', age: 22, gender: 'Male' }
]
}
});
</script>
</body>
</html>优势
- 动态性：可以根据数据动态生成表格，适用于数据变化频繁的场景。
- 灵活性：可以轻松地添加、删除或修改表格内容。
- 可维护性：代码结构清晰，易于维护和扩展。
应用场景
- 数据展示：用于展示从服务器获取的数据，如用户信息、商品列表等。
- 报表生成：用于生成各种报表，如销售报表、财务报表等。
- 动态表单：用于创建动态表单，根据用户输入生成不同的表格内容。
希望这些示例能帮助你理解如何在 JavaScript 中创建表格。如果你有任何具体的问题或需要进一步的帮助，请随时提问。
相关·内容
1回答
我有：一个index.js，我的GET SQL数据最初在其中执行。具有接受输入的表单的index.pug，其中包括table.jsvar userinput
当然，在一切加载完成之后，在index.js中的GET SQL Data中使用它。它最初会得到一个默认的查询。然后，我需要它接受
浏览 5提问于2018-07-31得票数 0
我对React非常陌生，我正在尝试将与我在render()中创建的表一起使用。到目前为止，我的代码看起来像这样- searchForm.js： $(this.refs.table).DataTable({}); <table ref="table" className="table">
浏览 3提问于2017-03-15得票数 1
2回答
我希望能够在App.js中访问例如App.js中的TableHeader，而不必在App.js中导入TableHeader。我的代码如下：src/App.jssrc/Components/Table.js
import TableHeader from './TableFooter&
浏览 1提问于2018-03-26得票数 1
回答已采纳
要开始这个过程，我将在index.js导出对象中分配一个数据库，以便在构建系统时能够添加另一个DB。下面是对这个问题的描述。当我运行server.js文件时，数据库db1的.sync函数同步Table1和Table2，然后开始监听它的端口。清除server.js文件是通过var db = require('.但是，在文件models/Table1.js中，服务器抛出一个错误TypeError: C
浏览 0提问于2017-03-13得票数 1
回答已采纳
2回答
我在我的项目中使用了需求，每个模块都有一个js文件，使用require来使用库/组件。').bootstrapTable({ striped: true, classes: 'table table-no-bordered',
s
浏览 4提问于2018-06-20得票数 1
回答已采纳
Server可以选择在Visual下创建数据库项目并管理Azure DevOps下的更改。
浏览 8提问于2022-10-19得票数 -3
2回答
我正在数据库中创建一个表，但出现错误。如何解决这个问题？CREATE TABLE categories( categoryName
浏览 2提问于2020-11-06得票数 0
我写了一个工具，它在php中从数据库中创建一个数组(当网站加载时)，现在我想使用js函数来改变这个数组在表格中的显示方式(不同的范围，列等)。 $js_data = json_encode($data); ?table += &#
浏览 35提问于2019-07-05得票数 2
2回答
我目前在从多维数组到表的数据迭代中遇到了问题。str = 'stack%splitoverflow,php%splitcodeigniter'结果如下所示。接下来，我将拆分%split分隔符中的每个数组值| col1 | col2 |
--------------
浏览 27提问于2020-02-27得票数 1
回答已采纳
1回答
我试着在jsf中使用bootstrap table libary，但它对我不起作用。 <h:outputStylesheet name="./js/bootstrap-table-all.js"></h:outputScript>
<h:outputScript name="./js/jquery.formatter.<
浏览 0提问于2015-07-09得票数 0
我正在编写一个Chrome扩展，我希望能够编写一个带有html标签的table元素，并以编程方式将其添加到具有内容脚本的页面中。我知道如何向页面添加元素，如下所示：document.getElementById("Container").appendChild(myTable);<table> blah blah <
浏览 1提问于2016-04-05得票数 0
是否可以在docfx下使用标记更改表的层| Property | Description || URL | `/api/<version>/auth/login` || Success | Http status *200* || Content/Media-Type | `application/json` || Role
浏览 3提问于2016-03-10得票数 6
回答已采纳
2回答
操作所有音乐会的“主”类是my-table.js。main.js只依赖于my-table.js，并从它创建一个插件： 'my-table' jQuery.fn.myTable); };现在，我想从这些文件中创建一个包含所有6个文件的大js文
浏览 0提问于2013-03-31得票数 7
我正在尝试加载一个MySQL表并将其存储到一个Datatables中，然后将其转换为数据。但是，我在用PHP获取的表上有一些问题。 <script src="js/jquery-3.6.0.min.js"></script>
<!/js/jquery.dataTables.min.<
浏览 2提问于2021-04-08得票数 1
回答已采纳
我正在尝试将表格拖拽程序导入到我的前端，但我得到了错误消息，即tableDragger不是一个函数。我尝试按照本教程进行操作，并按如下方式初始化表拖拽程序 <script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script> vare
浏览 14提问于2019-12-15得票数 0
我想创建一个表，将所有具有显示列的列呈现为{ key : string，display: string}，其中display是标题，key用于显示值。at getTableUnknownColumnError (table.js:890) at Function.from (<anonymous>)_getCellTemplates (table.js:1965)
at MatTab
浏览 5提问于2020-02-05得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
