首页-已知数组保存了产品信息，见如下代码。请编写代码完成如下要求。 goods:[ stock:500,name: 笔1{ stock:192,name:"纸 ,{ stock:50,name: 像皮”11.使用-for染出合适的页面。2.在页面上添加输入框和按钮，当用户单击按钮时把数据更新到数组中，并显示在表格的第一行，同时清空输入框里面的数据

-已知数组保存了产品信息，见如下代码。请编写代码完成如下要求。 goods:[ stock:500,name: 笔1{ stock:192,name:"纸 ,{ stock:50,name: 像皮”11.使用-for染出合适的页面。2.在页面上添加输入框和按钮，当用户单击按钮时把数据更新到数组中，并显示在表格的第一行，同时清空输入框里面的数据

时间: 2023-06-19 22:08:38 浏览: 146

以下是代码实现： ```html <!DOCTYPE html> <html> <head> <title>商品信息</title> <style type="text/css"> table { border-collapse: collapse; margin: 20px; } th, td { border: 1px solid black; padding: 5px; text-align: center; } input { margin: 10px; padding: 5px; font-size: 16px; } button { padding: 5px 15px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <table> <thead> <tr> <th>库存</th> <th>名称</th> </tr> </thead> <tbody id="goodsTable"> <tr> <td>500</td> <td>笔1</td> </tr> <tr> <td>192</td> <td>纸</td> </tr> <tr> <td>50</td> <td>像皮</td> </tr> </tbody> </table> <input type="text" id="stockInput" placeholder="库存"> <input type="text" id="nameInput" placeholder="名称"> <button onclick="addGoods()">添加商品</button> <script type="text/javascript"> function addGoods() { var stock = document.getElementById("stockInput").value; var name = document.getElementById("nameInput").value; var goodsTable = document.getElementById("goodsTable"); var newRow = goodsTable.insertRow(1); var stockCell = newRow.insertCell(0); var nameCell = newRow.insertCell(1); stockCell.innerHTML = stock; nameCell.innerHTML = name; document.getElementById("stockInput").value = ""; document.getElementById("nameInput").value = ""; } </script> </body> </html> ``` 通过以上代码，我们可以实现一个简单的商品信息表格，并能够添加新的商品信息。当用户单击“添加商品”按钮时，会获取输入框中的数据，并将其添加到表格的第一行，同时清空输入框中的内容。

阅读全文