时间戳

首页 > 解决方案 > 使用 jquery 用新值更新表

javascript - 使用 jquery 用新值更新表

问题描述

我正在尝试创建一个更新表，该表使用来自服务器的 ajax 调用获取数据。如果数据有任何变化，它会将数据发送到网页。我已经使用设备的 ID 动态设置了表的 ID。

这是我的桌子

<table id="slave">
    <thead>
        <tr>
            <th>slave name</th>
            <th>slave id</th>
            <th>type</th>
            <th>Status</th>
            <th>value</th>
            <th>mode</th>
            <th>name1</th>
            <th>name2</th>
            <th>name3</th>
            <th>name4</th>
            <th>s1</th>
            <th>s2</th>
            <th>s3</th>
            <th>s4</th>
            <th>voltage</th>
            <th>temperature</th>
            <th>humidity</th>
        </tr>
    </thead>
    <tbody>
        <tr id="3">
            <td id="name"> IPL Conf Room Door </td>
            <td id="slave_id"> 3 </td>
            <td id="type"> door_sensor </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 2 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="4">
            <td id="name"> IPL Motion Sensor </td>
            <td id="slave_id"> 4 </td>
            <td id="type"> PIR </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 2 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="5">
            <td id="name"> IPL Conf Room Extension </td>
            <td id="slave_id"> 5 </td>
            <td id="type"> ir_relay </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 10 </td>
            <td id="temp"> 21 </td>
            <td id="hum"> 83 </td>
        </tr>
        <tr id="6">
            <td id="name"> IPL Scene Switch </td>
            <td id="slave_id"> 6 </td>
            <td id="type"> macro_panel </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode"> 4 </td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 0 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="7">
            <td id="name"> IPL Conf Lights </td>
            <td id="slave_id"> 7 </td>
            <td id="type"> fb </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode"> 3 </td>
            <td id="name1"> </td>
            <td id="name2"> </td>
            <td id="name3"> </td>
            <td id="name4">0</td>
            <td id="s1"> 0 </td>
            <td id="s2"> 0 </td>
            <td id="s3"> 0 </td>
            <td id="s4">0</td>
            <td id="voltage">0</td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
        <tr id="9">
            <td id="name"> IPL Reception Extension </td>
            <td id="slave_id"> 9 </td>
            <td id="type"> ir_relay </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-blue"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 10 </td>
            <td id="temp"> 23 </td>
            <td id="hum"> 85 </td>
        </tr>
        <tr id="10">
            <td id="name"> IPL Main Door </td>
            <td id="slave_id"> 10 </td>
            <td id="type"> door_sensor </td>
            <td id="status">
                <div class="led-green"></div>
            </td>
            <td id="value">
                <div class="led-yellow"></div>
            </td>
            <td id="mode">0</td>
            <td id="name1">0</td>
            <td id="name2">0</td>
            <td id="name3">0</td>
            <td id="name4">0</td>
            <td id="s1">0</td>
            <td id="s2">0</td>
            <td id="s3">0</td>
            <td id="s4">0</td>
            <td id="voltage"> 2 </td>
            <td id="temp">0</td>
            <td id="hum">0</td>
        </tr>
    </tbody>
</table>

行 ID 使用 device_id 设置。

这是我的ajax调用

function updateDatTable() {

    fetch('{{route('
            pusher ')}}', {
                method: 'post',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json', // sent request
                    'Accept': 'application/json' // expected data sent back
                },
                body: JSON.stringify({ "mac": "{{$slaves['mac']}}" })
            })
        .then((res) => res.json())
        .then(function(res) {
            if (res['message'] == "no Change") {
                //alert(JSON.stringify(res));
            } else {
                alert(JSON.stringify(res)); // logic to update cell data goes here.
            }
            setTimeout(updateDatTable, 3000);
        })
        .catch(function(error) {
            alert(error);
            setTimeout(updateDatTable, 3000); // <-- there was a network problem, 
            //     but still, program the next one!
        })

}

如果有任何变化，数据的结构将如下所示。

res['array_key (starts from zero)']['td_id'];

如果我们需要找到slave_id来查找id，我们可以通过检查得到它

res['array_key (starts from zero)']['slave_id'];

该数组将具有要更新的值。我只需要 jquery 或 javascript 中的一些帮助来更改表格单元格数据。我不是前端的人。谢谢你。

标签： javascriptjquery

解决方案

您可以res根据您的逻辑迭代对象并使用更新 dom 节点的 innerHtml$("#<yourIdHere>").html("Text you want to replace");

参考：https ://stackoverflow.com/a/1309454/2073920

推荐阅读