使用Node.js和Handlebars对表格的<th>标记进行水平排序可以通过以下步骤实现:
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
// 设置handlebars作为模板引擎
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.get('/table', (req, res) => {
// 获取表格数据
const tableData = [
{ name: 'John', age: 25, city: 'New York' },
{ name: 'Alice', age: 30, city: 'London' },
{ name: 'Bob', age: 35, city: 'Paris' }
];
// 渲染表格页面
res.render('table', { tableData });
});
<table>
<thead>
<tr>
<th><a href="?sort=name">Name</a></th>
<th><a href="?sort=age">Age</a></th>
<th><a href="?sort=city">City</a></th>
</tr>
</thead>
<tbody>
{{#each tableData}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{city}}</td>
</tr>
{{/each}}
</tbody>
</table>
app.get('/table', (req, res) => {
// 获取排序字段
const sortField = req.query.sort || 'name';
// 根据排序字段对表格数据进行排序
const sortedTableData = tableData.sort((a, b) => {
if (a[sortField] < b[sortField]) {
return -1;
} else if (a[sortField] > b[sortField]) {
return 1;
} else {
return 0;
}
});
// 渲染表格页面
res.render('table', { tableData: sortedTableData });
});
node index.js
以上是使用Node.js和Handlebars对表格的<th>标记进行水平排序的步骤。在实际应用中,可以根据具体需求进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云