如何在没有 JS 代码的情况下仅使用带有 EJS 的 socket.io？答案

【问题标题】：How to use socket.io with only EJS without JS code?如何在没有 JS 代码的情况下仅使用带有 EJS 的 socket.io？
【发布时间】：2018-04-15 19:06:25
【问题描述】：

这是我在 EJS 中的代码，它根据某些参数从我的节点服务器实时接收数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body class="container">

<header>
    <% include ../partials/header %>
</header>

<main>
  <script src="/socket.io/socket.io.js"></script>
  <table cellpadding="2" cellspacing="2" border="0" width="100%" align="center">
  <thead>
      <tr>
          <th>Name</th>
          <th>IsOnline</th>
          <th>Location</th>
      </tr>
  </thead>
      <tbody id="tableData"></tbody>
  </table>
  <script type="text/javascript">
  var socket = io();
  socket.on('status', function(data){
    var k = '<tbody>'
    for(i = 0;i < data.length; i++){
        k+= '<tr>';
        k+= '<td>' + data[i].url + '</td>';
        k+= '<td align="justify">' + data[i].name + '</td>';
        k+= '<td align="justify" width="30%">' + data[i].status + '</td>';
        k+= '<td align="justify" width="30%">' + data[i].loc + '</td>';
        k+= '</tr>';
    }
    k+='</tbody>';
    document.getElementById('tableData').innerHTML = k;
  });
 </script>
</main>

<footer>
    <% include ../partials/footer %>
</footer>

</body>
</html>

这段代码工作得很好，但是，我有两个问题：

我无法找到一种干净的方法来根据条件更改 IsOnline 值的文本颜色，例如：如果用户离线，则文本应为红色的 Offline，否则为绿色。
另外，我使用 js 和 html 创建了这个表，因为数据变量在 EJS 中不可用，所以有什么方法可以获取这个变量。我不想使用res.render() 或ejs.compile() 发送数据

【问题讨论】：

标签： javascript html node.js socket.io ejs

【解决方案1】：

以下对我有用：

for(i = 0;i < data.length; i++){
    var color = data[i].status === "Offline" ? "red" : "green"; // If status is 'Offline', use red. If not use green

    k+= '<tr>';
    k+= '<td>' + data[i].url + '</td>';
    k+= '<td align="justify">' + data[i].name + '</td>';
    k+= '<td align="justify" width="30%" style="color: ' + color + '">' + data[i].status + '</td>';
    k+= '<td align="justify" width="30%">' + data[i].loc + '</td>';
    k+= '</tr>';
}

【讨论】：

我尝试做内联样式只是为了测试目的，但它没有像这样工作：k+= '<td width="30%" style="color:red">' + data[i].status + '</td>';
查看我的更新答案，我使用了一些模拟数据来测试它，它对我有用。
是的，我试过了，它工作正常，但我仍然遇到第二个问题