每次数据更改时如何更新表的行？

Question

我正在尝试使用 JavaScript 制作表格。 我创建了一个 function makeTable 以在每次调用时生成表数据。 我的代码 -

<table class="table table-striped">
                <tr>
                    <th>User Name</th>
                    <th>Audio</th>
                    <th>Video</th>
                </tr>
                <tbody id="myTable">
                </tbody>
            </table>


    function onMemberListUpdate(members) {
        console.log("member updated")
        buildTable(members);
    }

function buildTable(data){
        console.log("build table function called", data);
        var table = document.getElementById('myTable');
        for(var i =0; i<data.length; i++){
            var row = `<tr> <td>${data[i].name}</td> <td>${data[i].audio_muted}</td> <td>${data[i].video_muted}</td> <td><button class="btn btn-primary">Audio</button></td>`
            table.innerHTML += row;

        }

    }

我在这里面临的问题是，每当成员列表更新和onMemberListUpdate function 被调用时，它都会调用buildTable function ，每次我不想每次都创建新行而是我想更新现有表数据时都会创建新行。 我怎样才能实现这件事请帮忙

Answer 1

考虑用属性标记每一行，以便以后需要更新时找到它。

您可以（例如）将class="item-id-${data[i].id}"添加到tr （如下所示）

function buildTable(data){
        console.log("build table function called", data);
        var table = document.getElementById('myTable');
        for(var i =0; i<data.length; i++){
            var row = `<tr class="item-id-${data[i].id}"> <td>${data[i].name}</td> <td>${data[i].audio_muted}</td> <td>${data[i].video_muted}</td> <td><button class="btn btn-primary">Audio</button></td>`
            table.innerHTML += row;

        }

    }

然后您可以调用updateRow并在该 function 中您可以通过执行$(".item-id-123")来获取该行，您可以创建新的 html 来替换它，所以像这样：

function updateRow(data) {
  $(`.item-id-${data.id}`).replaceWith(`
    <tr class="item-id-${data.id}">
      <td>${data.name}</td>
      <td>${data.audio_muted}</td>
      <td>${data.video_muted}</td>
      <td><button class="btn btn-primary">Audio</button></td>
    </tr>`);
}