html 设计表格显示IO端口 及其状态 ,状态使用圆形的图标表示,状态分为高电平低电平两种状态,分别用黑色与绿色表示.并且当用户点击对应的端口或者电平时会从当前状态变为另一种状态
时间: 2024-02-12 11:02:24 浏览: 17
下面是一个简单的HTML表格,用于显示IO端口及其状态,状态使用圆形图标表示,并且可以通过点击来切换状态:
```html
<!DOCTYPE html>
<html>
<head>
<title>IO端口状态表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
.circle {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;
border: 2px solid #000;
}
.circle.green {
background-color: #00ff00;
}
.circle.black {
background-color: #000;
}
</style>
<script>
function toggleStatus(row, col) {
var circle = document.getElementById("circle-" + row + "-" + col);
if (circle.classList.contains("green")) {
circle.classList.remove("green");
circle.classList.add("black");
} else {
circle.classList.remove("black");
circle.classList.add("green");
}
}
</script>
</head>
<body>
<table>
<tr>
<th>端口</th>
<th>状态</th>
</tr>
<tr>
<td>IO1</td>
<td>
<span id="circle-1-1" class="circle green" onclick="toggleStatus(1, 1)"></span>
</td>
</tr>
<tr>
<td>IO2</td>
<td>
<span id="circle-2-1" class="circle black" onclick="toggleStatus(2, 1)"></span>
</td>
</tr>
<tr>
<td>IO3</td>
<td>
<span id="circle-3-1" class="circle green" onclick="toggleStatus(3, 1)"></span>
</td>
</tr>
</table>
</body>
</html>
```
在上面的代码中,我们使用了一个表格来显示IO端口及其状态。每个状态都使用一个圆形的 span 元素表示,其中给每个元素一个唯一的ID,以便在 JavaScript 中查找和切换状态。我们还为每个状态添加了一个 onclick 事件处理程序,以在用户点击时切换状态。JavaScript 函数 toggleStatus(row, col) 接受行和列号作为参数,并根据当前状态来切换颜色。
在这个示例中,我们使用了两种状态:绿色表示高电平状态,黑色表示低电平状态。您可以根据需要更改这些颜色和状态。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)