如何在网页中通过Domotz区分设备连接/断开状态并显示对应图标

嘿，我看你现在的问题是所有设备都显示绿色对勾，没法区分离线的，对吧？核心原因是你的代码不管设备实际状态，统一输出了对勾图片。咱们只需要加个状态判断逻辑就行，步骤很简单：

第一步：先搞清楚Domotz返回的状态字段 #

首先，你得知道Domotz API给你的设备数据里，哪个字段是表示在线状态的。可以先在浏览器控制台打印下返回的数据看看：

success: function(data) {
    console.log(data); // 打开浏览器F12控制台，找到类似is_online、status这样的状态字段
    // ... 其他代码
}

Domotz一般会返回is_online（布尔值，true表示在线，false表示离线）或者status（字符串，比如"online"/"offline"），找到这个字段就好办了。

第二步：修改代码动态切换图标 #

我给你调整了代码，补上了遍历逻辑（原代码里缺循环，可能只处理了一个设备），加上状态判断：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <table id="devicelist" style="width:100%">
        <tr>
            <th>Display Name</th>
            <th>ID</th>
            <th>Name</th>
            <th>Connection Status</th> <!-- 把表头改成更清晰的名称 -->
        </tr>
    </table>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script>
        // 补全Domotz API请求的完整结构
        $.ajax({
            url: "你的Domotz API接口地址",
            headers: {/* 你的请求头信息 */},
            success: function(data) {
                var table = document.getElementById('devicelist');
                // 遍历所有设备数据
                for(let i = 0; i < data.length; i++) {
                    const row = table.insertRow(i + 1);
                    const cell1 = row.insertCell(0);
                    const cell2 = row.insertCell(1);
                    const cell3 = row.insertCell(2);
                    const cell4 = row.insertCell(3);

                    cell1.innerHTML = i + 1;
                    cell2.innerHTML = data[i].display_name;
                    cell3.innerHTML = data[i].id;

                    // 根据设备状态切换图标
                    if(data[i].is_online) {
                        // 在线显示绿色对勾
                        cell4.innerHTML = "<img src='img/greenn.jpg' alt='已连接'/>";
                    } else {
                        // 离线显示叉号，记得把路径换成你实际的叉号图片
                        cell4.innerHTML = "<img src='img/redcross.png' alt='已断开'/>";
                    }
                }
            }
        });
    </script>
</body>
</html>

小提醒 #

• 如果你的状态字段不是is_online，比如是status字段值为"online"，那把判断条件改成if(data[i].status === "online")就行。
• 确保你的叉号图片路径正确，比如img/redcross.png要确实存在于项目目录中。
• 原代码里缺少遍历所有设备的循环逻辑，我已经补上了，这样所有设备都会被正确处理。

内容的提问来源于stack exchange，提问作者StackGuru