goods:[ stock:500,name: 笔1{ stock:192,name:"纸 ,{ stock:50,name: 像皮”11.使用-for染出合适的页面。2.在页面上添加输入框和按钮,当用户单击按钮时把数据更新到数组中,并显示在表格的第一行,同时清空输入框里面的数据
时间: 2023-06-20 09:05:06 浏览: 84
好的,这是一个简单的前端编程任务,具体的代码实现如下:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品管理</title>
</head>
<body>
<h1>商品列表</h1>
<table id="goodsTable">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<!-- 这里将通过JavaScript代码动态添加商品信息 -->
</tbody>
</table>
<h2>添加商品</h2>
<label for="nameInput">名称:</label>
<input type="text" id="nameInput" /><br />
<label for="stockInput">库存:</label>
<input type="text" id="stockInput" /><br />
<button id="addButton">添加</button>
<script src="./index.js"></script>
</body>
</html>
```
JavaScript部分:
```javascript
const goods = [
{ stock: 500, name: "笔" },
{ stock: 192, name: "纸" },
{ stock: 50, name: "像皮" },
];
function renderGoodsTable() {
const tbody = document.querySelector("#goodsTable tbody");
tbody.innerHTML = "";
goods.forEach((item, index) => {
const tr = document.createElement("tr");
tr.innerHTML = `<td>${index + 1}</td><td>${item.name}</td><td>${item.stock}</td>`;
tbody.appendChild(tr);
});
}
function addGoods() {
const nameInput = document.querySelector("#nameInput");
const stockInput = document.querySelector("#stockInput");
const name = nameInput.value;
const stock = parseInt(stockInput.value);
if (!name || isNaN(stock)) {
alert("请输入正确的商品信息!");
return;
}
goods.unshift({ name, stock });
renderGoodsTable();
nameInput.value = "";
stockInput.value = "";
}
renderGoodsTable();
const addButton = document.querySelector("#addButton");
addButton.addEventListener("click", addGoods);
```
这里定义了一个名为 `goods` 的数组,其中包含了三个商品的信息。`renderGoodsTable` 函数用于渲染商品列表,将商品信息动态添加到表格中。`addGoods` 函数用于添加新的商品信息,首先获取输入框中的数据,然后判断是否输入正确的商品信息,最后将新商品信息添加到 `goods` 数组的开头,并重新渲染商品列表。最后通过 `addEventListener` 方法将添加按钮的点击事件与 `addGoods` 函数绑定起来。
阅读全文