<th scope="row"><label>Link State</label></th> <td><span id="wr1_link">-</span></td> 修改代码 当wr1_link输出1时 显示up 输出0时显示down

可以通过以下代码实现：

<th scope="row"><label>Link State</label></th>
<td><span id="wr1_link" class="link-state">-</span></td>

.link-state[data-state="1"]::before {
  content: "up";
  color: green;
}

.link-state[data-state="0"]::before {
  content: "down";
  color: red;
}

var wr1_link = document.getElementById("wr1_link");
wr1_link.setAttribute("data-state", "1"); // 设置连接状态为1，即连接正常

这里添加了一个class属性为link-state的span元素，并使用CSS伪元素的before属性来显示连接状态的文本。同时，我们在JavaScript中通过setAttribute方法来动态修改data-state属性的值，从而改变连接状态的显示。

相关问题

<legend>P1</legend> <table> <tr> <th scope="row"><label>Link State</label></th> <td><span id="wr1_link">-</span></td> </tr> <tr> <th scope="row"><label>Lock State</label></th> <td><span id="wr1_lock">-</span></td> </tr> <tr> <th scope="row"><label>Sync State</label></th> <td><span id="wr1_sync">-</span></td> </tr> <tr> <th scope="row"><label>Tranceive Bytes</label></th> <td><span id="wr1_tranceive">-</span></td> </tr> <tr> <th scope="row"><label>Sync Source</label></th> <td><span id="wr1_source">-</span></td> </tr> <tr> <th scope="row"><label>Loopback Time(ps)</label></th> <td><span id="wr1_loopback">-</span></td> </tr> <tr> <th scope="row"><label>Oneway Time(ps)</label></th> <td><span id="wr1_oneway">-</span></td> </tr> <tr> <th scope="row"><label>Link Time</label></th> <td><span id="wr1_linktime">-</span></td> </tr> </table> <legend>P2</legend> <table> <tr> <th scope="row"><label>Link State</label></th> <td><span id="wr0_link">-</span></td> </tr> <tr> <th scope="row"><label>Lock State</label></th> <td><span id="wr0_lock">-</span></td> </tr> <tr> <th scope="row"><label>Sync State</label></th> <td><span id="wr0_sync">-</span></td> </tr> <tr> <th scope="row"><label>Tranceive Bytes</label></th> <td><span id="wr0_tranceive">-</span></td> </tr> <tr> <th scope="row"><label>Sync Source</label></th> <td><span id="wr0_source">-</span></td> </tr> <tr> <th scope="row"><label>Loopback Time(ps)</label></th> <td><span id="wr0_loopback">-</span></td> </tr> <tr> <th scope="row"><label>Oneway Time(ps)</label></th> <td><span id="wr0_oneway">-</span></td> </tr> <tr> <th scope="row"><label>Link Time</label></th> <td><span id="wr0_linktime">-</span></td> </tr> </table> 判断wr0_link的值 如果值为1 则让P2的表格亮一点 让P1的表格灰一点 如果值为0 则让P1的表格亮一点 P2的表格灰一点

根据你提供的代码，我可以给出如下的JavaScript代码来实现你的要求：

var wr0_link = document.getElementById("wr0_link").innerText;
if (wr0_link == "1") {
  // 如果 wr0_link 值为 1，则让 P2 的表格亮一点，让 P1 的表格灰一点
  document.querySelector("legend:nth-of-type(2)").style.opacity = "1";
  document.querySelector("legend:nth-of-type(1)").style.opacity = "0.5";
} else if (wr0_link == "0") {
  // 如果 wr0_link 值为 0，则让 P1 的表格亮一点，让 P2 的表格灰一点
  document.querySelector("legend:nth-of-type(1)").style.opacity = "1";
  document.querySelector("legend:nth-of-type(2)").style.opacity = "0.5";
}

这段代码的作用是获取 ID 为 `wr0_link` 的元素的文本内容（即 `wr0_link` 的值），然后根据值的不同设置两个 `<legend>` 元素的不透明度，从而实现让 P1 或 P2 的表格亮一点的效果。

<tr> <th scope="row"><label>Link State</label></th> <td><span id="wr1_link">-</span></td> </tr> <tr> <th scope="row"><label>Lock State</label></th> <td><span id="wr1_lock">-</span></td> </tr> 将这两个输出的0/1 换成红灯 绿灯

可以使用 HTML 和 CSS 来实现这个效果，将代码改为以下形式即可：

<tr>
  <th scope="row"><label>Link State</label></th>
  <td><span id="wr1_link" class="red-light">-</span></td>
</tr>
<tr>
  <th scope="row"><label>Lock State</label></th>
  <td><span id="wr1_lock" class="green-light">-</span></td>
</tr>

然后在 CSS 中定义红灯和绿灯的样式，可以使用伪元素 `::before` 来实现：

.red-light::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  margin-right: 5px;
}

.green-light::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: green;
  margin-right: 5px;
}

这样就可以将 0/1 替换成红灯和绿灯了。