我正在尝试创建一个更新表，该表使用来自服务器的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中的一些帮助即可更改表格单元格数据。我不是前端人。谢谢。
答案 0 :(得分：2)
您可以根据自己的逻辑在res对象上进行迭代，并使用$("#<yourIdHere>").html("Text you want to replace");来更新dom节点的innerHtml