请你写出示例HTML使用JavaScript支持新增设备信息:用户点击”新增”按钮,用户输入修改设备信息后,点击”确定”按钮,将输入设备信息新增到上方表格 要求4:使用JavaScript支持修改设备信息:用户点击”修改”超链接,下方表单显示超链接所在行的设备信息,用户修改设备信息后,点击确定按钮,将输入信息替换原来超链接所在行的设备信息。
时间: 2023-06-09 08:06:43 浏览: 193
在HTML中插入JavaScript代码的示例
5星 · 资源好评率100%
好的,我理解了你的问题。以下是示例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>
```
这段代码实现了一个表单和一个表格,用户可以在表单中输入设备信息并添加到表格中。当用户点击表格中的编辑超链接时,下方表单会显示所选设备信息,并且用户可以通过更新表单中的值并再次点击“确定”按钮来更新表格中的设备信息。
阅读全文