请你写出示例HTML使用JavaScript支持修改设备信息：用户点击”修改”超链接，下方表单显示超链接所在行的设备信息，用户修改设备信息后，点击确定按钮，将输入信息替换原来超链接所在行的设备信息。
时间: 2023-06-09 15:06:32 浏览: 61
好的，以下是示例HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>设备信息修改</title>
<script>
function editDeviceInfo(rowId) {
// 获取要编辑的行
var row = document.getElementById(rowId);
// 获取设备信息
var deviceName = row.cells[0].innerText;
var deviceType = row.cells[1].innerText;
var deviceModel = row.cells[2].innerText;
// 显示设备信息表单
var form = document.getElementById("deviceForm");
form.style.display = "block";
// 填充设备信息
form.elements["name"].value = deviceName;
form.elements["type"].value = deviceType;
form.elements["model"].value = deviceModel;
// 记录要编辑的行
form.rowId = rowId;
}
function saveDeviceInfo() {
// 获取要保存的行
var rowId = document.getElementById("deviceForm").rowId;
var row = document.getElementById(rowId);
// 获取设备信息
var deviceName = document.getElementById("name").value;
var deviceType = document.getElementById("type").value;
var deviceModel = document.getElementById("model").value;
// 替换设备信息
row.cells[0].innerText = deviceName;
row.cells[1].innerText = deviceType;
row.cells[2].innerText = deviceModel;
// 隐藏设备信息表单
var form = document.getElementById("deviceForm");
form.style.display = "none";
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>设备名称</th>
<th>设备类型</th>
<th>设备型号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>iPhone 12</td>
<td>手机</td>
<td>A2404</td>
<td><a href="#" onclick="editDeviceInfo('row1')">修改</a></td>
</tr>
<tr id="row2">
<td>iPad Air</td>
<td>平板电脑</td>
<td>A2316</td>
<td><a href="#" onclick="editDeviceInfo('row2')">修改</a></td>
</tr>
<tr id="row3">
<td>MacBook Pro</td>
<td>笔记本电脑</td>
<td>M1</td>
<td><a href="#" onclick="editDeviceInfo('row3')">修改</a></td>
</tr>
</tbody>
</table>
<form id="deviceForm" style="display: none;">
<label>设备名称:</label>
<input type="text" id="name"><br>
<label>设备类型:</label>
<input type="text" id="type"><br>
<label>设备型号:</label>
<input type="text" id="model"><br>
<button type="button" onclick="saveDeviceInfo()">确定</button>
</form>
</body>
</html>
```
在这个示例中，我们通过表格展示设备信息，并在每行上添加一个“修改”超链接。用户点击超链接时，会调用`editDeviceInfo`函数，该函数会显示一个表单，展示要编辑的设备信息，并记录要编辑的行的ID。用户在表单中修改设备信息后，点击“确定”按钮，会调用`saveDeviceInfo`函数，该函数会获取表单中的设备信息，并替换要编辑的行的信息。注意，我们为设备信息表单添加了一个`id`属性，以便在JavaScript中引用它。
相关推荐
最新推荐
html超链接a标签的href跳转跟onclick之间执行顺序示例介绍
html超链接a标签的href跳转跟onclick之间执行关系：如果onclick返回false，则a不进行跳转，如果onclick返回true，则a跳转，感兴趣的朋友可以了解下本
Spring Boot中使用LDAP来统一管理用户信息的示例
本篇文章主要介绍了Spring Boot中使用LDAP来统一管理用户信息的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用layui前端框架弹出form表单以及提交的示例
今天小编就为大家分享一篇使用layui前端框架弹出form表单以及提交的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
css通过伪类来设置超链接样式附示例
css设置超链接样式是通过伪类来实现的，默认状态下，创建的超级链接的文字颜色为蓝色，并带有下划线，访问之后变为紫色，下面有个不错的示例，喜欢的朋友可以尝试操作下
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
本文实例讲述了JavaScript(js)处理的HTML事件、键盘事件、鼠标事件。分享给大家供大家参考，具体如下： 示例代码： HTML文件： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
spring添加xml配置文件
1. 创建一个新的Spring配置文件，例如"applicationContext.xml"。
2. 在文件头部添加XML命名空间和schema定义，如下所示：
```
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。