请你写出示例HTML使用JavaScript支持新增设备信息：用户点击”新增”按钮，用户输入修改设备信息后，点击”确定”按钮，将输入设备信息新增到上方表格要求4：使用JavaScript支持修改设备信息：用户点击”修改”超链接，下方表单显示超链接所在行的设备信息，用户修改设备信息后，点击确定按钮，将输入信息替换原来超链接所在行的设备信息。

时间: 2023-06-09 08:06:43 浏览: 60

好的，我理解了你的问题。以下是示例HTML代码，使用JavaScript支持新增和修改设备信息： ```html <!DOCTYPE html> <html> <head> <title>Add and Edit Device Info</title> <meta charset="UTF-8"> </head> <body> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="brand">Brand:</label> <input type="text" id="brand" name="brand"><br><br> <label for="model">Model:</label> <input type="text" id="model" name="model"><br><br> <input type="button" value="确定" onclick="addDeviceInfo()"> </form> <br><br> <table id="devices"> <tr> <th>Name</th> <th>Brand</th> <th>Model</th> <th>Edit</th> </tr> </table> <script> // Sample device info data let devices = [ { name: "Device 1", brand: "Brand 1", model: "Model 1" }, { name: "Device 2", brand: "Brand 2", model: "Model 2" } ]; // Display existing device info in the table for (let i = 0; i < devices.length; i++) { let row = devices[i]; let newRow = document.createElement("tr"); newRow.innerHTML = "<td>" + row.name + "</td><td>" + row.brand + "</td><td>" + row.model + "</td><td><a href='#' onclick='editDeviceInfo(" + i + ")'>Edit</a></td>"; document.getElementById("devices").appendChild(newRow); } function addDeviceInfo() { // Get new device info from the form let name = document.getElementById("name").value; let brand = document.getElementById("brand").value; let model = document.getElementById("model").value; // Add new device info to the array devices.push({ name: name, brand: brand, model: model }); // Display new device info in the table let deviceTable = document.getElementById("devices"); let newRow = document.createElement("tr"); newRow.innerHTML = "<td>" + name + "</td><td>" + brand + "</td><td>" + model + "</td><td><a href='#' onclick='editDeviceInfo(" + (devices.length-1) + ")'>Edit</a></td>"; deviceTable.appendChild(newRow); // Clear form fields document.getElementById("name").value = ""; document.getElementById("brand").value = ""; document.getElementById("model").value = ""; } function editDeviceInfo(index) { // Get the device info from the selected row let row = devices[index]; let name = row.name; let brand = row.brand; let model = row.model; // Populate the form with the selected device info document.getElementById("name").value = name; document.getElementById("brand").value = brand; document.getElementById("model").value = model; // Replace the selected row with the updated device info let deviceTable = document.getElementById("devices"); let selectedRow = deviceTable.rows[index+1]; let newRow = document.createElement("tr"); newRow.innerHTML = "<td>" + name + "</td><td>" + brand + "</td><td>" + model + "</td><td><a href='#' onclick='editDeviceInfo(" + index + ")'>Edit</a></td>"; deviceTable.replaceChild(newRow, selectedRow); // Clear form fields document.getElementById("name").value = ""; document.getElementById("brand").value = ""; document.getElementById("model").value = ""; } </script> </body> </html> ``` 这段代码实现了一个表单和一个表格，用户可以在表单中输入设备信息并添加到表格中。当用户点击表格中的编辑超链接时，下方表单会显示所选设备信息，并且用户可以通过更新表单中的值并再次点击“确定”按钮来更新表格中的设备信息。

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

最新推荐

Spring Boot中使用LDAP来统一管理用户信息的示例

vue实现点击按钮切换背景颜色的示例代码

Python使用tkinter库实现文本显示用户输入功能示例

微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】

Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

zigbee-cluster-library-specification

管理建模和仿真的文件

【实战演练】MATLAB用遗传算法改进粒子群GA-PSO算法

openstack的20种接口有哪些

JSBSim Reference Manual