html 设计表格显示IO端口 及其状态 ，状态使用圆形的图标表示，状态分为高电平低电平两种状态，分别用黑色与绿色表示.并且当用户点击对应的端口或者电平时会从当前状态变为另一种状态，对应的文字同时改变，IO状态会自动通过WebSocket获取到的状态进行更新，用户点击的状态变化通过WebSocket同步到服务器后，通过后续的推送实现状态改变 给出代码

以下是一个简单的示例代码，用于实现你所描述的功能：

HTML 代码：

<table>
  <thead>
    <tr>
      <th>端口</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>IO1</td>
      <td>
        <div class="status" data-status="low"></div>
        <span>低电平</span>
      </td>
    </tr>
    <tr>
      <td>IO2</td>
      <td>
        <div class="status" data-status="low"></div>
        <span>低电平</span>
      </td>
    </tr>
    <tr>
      <td>IO3</td>
      <td>
        <div class="status" data-status="low"></div>
        <span>低电平</span>
      </td>
    </tr>
  </tbody>
</table>

CSS 代码：

.status {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #000;
}

.status[data-status="high"] {
  background-color: green;
}

.status[data-status="low"] {
  background-color: black;
}

table {
  border-collapse: collapse;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
}

JavaScript 代码：

// 创建 WebSocket 连接
const socket = new WebSocket('ws://localhost:8080');

// 监听 WebSocket 连接事件
socket.addEventListener('open', (event) => {
  console.log('WebSocket connected');
});

// 监听 WebSocket 消息事件
socket.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  const statusElement = document.querySelector(`.status[data-port="${data.port}"]`);
  statusElement.dataset.status = data.status;
  statusElement.nextElementSibling.textContent = data.status === 'high' ? '高电平' : '低电平';
});

// 监听表格点击事件
document.querySelector('table').addEventListener('click', (event) => {
  const target = event.target;
  if (target.classList.contains('status')) {
    const currentStatus = target.dataset.status;
    const newStatus = currentStatus === 'high' ? 'low' : 'high';
    target.dataset.status = newStatus;
    target.nextElementSibling.textContent = newStatus === 'high' ? '高电平' : '低电平';
    const port = target.dataset.port;
    socket.send(JSON.stringify({ port, status: newStatus }));
  }
});

以上代码实现了一个简单的 IO 状态表格，可以通过点击状态图标来切换状态，并通过 WebSocket 实时同步状态变化。需要注意的是，这里的 WebSocket 地址应该替换成你实际使用的地址。