用HB表格做名茶馆茶叶订购的代码
时间: 2024-12-09 08:16:46 浏览: 15
在HBuilder中创建名茶馆茶叶订购的表格应用,你可以使用数据表格组件来展示茶叶种类、价格、库存等信息,并通过事件驱动的方式处理用户的订购操作。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<script src="hb.js"></script> <!--假设HBuilder已经内置了这个库-->
</head>
<body>
<table id="teaTable" data-hb-event="click(td[data-type='order']):call(orderTea)">
<thead>
<tr>
<th>茶叶名称</th>
<th>单价</th>
<th>库存</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 使用模板动态生成茶叶行 -->
{{each teas as tea}}
<tr>
<td>{{tea.name}}</td>
<td>{{tea.price}}</td>
<td>{{tea.stock}}</td>
<td><button data-type="order">订购</button></td>
</tr>
{{/each}}
</tbody>
</table>
<script>
// 假设teas是一个包含茶叶信息的对象数组
var teas = [
{name: '龙井', price: 100, stock: 50},
{name: '普洱', price: 200, stock: 30},
// 更多茶叶...
];
function orderTea(event) {
var row = event.target.parentNode;
var teaName = row.querySelector('td:first-child').innerText;
console.log(`用户订购了${teaName}`);
// 这里需要添加实际的订单处理逻辑,比如更新库存或提交订单等
}
// 初始化表格
HB.init();
</script>
</body>
</html>
```
阅读全文