使用 jquery 用新值更新表答案

【问题标题】：update table with new values using jquery使用 jquery 用新值更新表
【发布时间】：2019-08-06 05:02:15
【问题描述】：

我正在尝试创建一个使用 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 中的一些帮助来更改表格单元格数据。我不是前端的人。谢谢。

【问题讨论】：

您可以使用 jquery 的 .remove() 函数来删除现有的行/列和 .append() 来添加新的行和列。
你能分享一个例子 sn-p 吗？
上面分享的示例表有问题。您在多个 td 上使用相同的 ID。请更正这一点，我很乐意提供帮助。
您可以为此使用服务器端可编辑数据表。如果对您有帮助，请查看此链接：editor.datatables.net/examples/inline-editing/serverSide.html
你可以根据你的逻辑迭代你的对象并使用$("#<yourIdHere>").html("Text you want to replace");更新dom节点的innerHtml参考：stackoverflow.com/a/1309454/2073920

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：