如何在JavaScript中更新没有唯一id的html值？

Question

目前，我正在开发一个引导硬币市场套利信息的网站。

我想知道在JavaScript中下面的方法是否可行。(没有反应)

后端- django

def index(request):
    data = [{"name": "BTC", "binance": "price1", "gecko": "price2", "ftx": "price3"}, 
            {"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]
       
    return render(request, 'index.html', context={'data': data})

html -

<table class="table table-striped mb-0 fixed">
          <thead>
          <tr>
              <th>name</th>
              <th>binance</th>
              <th>gecko</th>
              <th>ftx</th>
          </tr>
          </thead>
          <tbody>
          {% for d in data %}
              <tr>
                  <td>{{ d.name }}</td>
                  <td>{{ d.binance }}</td>
                  <td>{{ d.ftx }}</td>
                  <td>{{ d.okx }}</td>
              </tr>
          {% endfor %}
          </tbody>
</table>

JS -

var socket = new WebSocket(
    'ws://' + window.location.host +
    '/ws?session_key=${sessionKey}')

socket.onmessage = function (e) {
    let positions_data = JSON.parse(e.data)
    
    //if positions_data {"site": "binance", "price": "27000", "name": "BTC"}
    //update data -> 
    data = [{"name": "BTC", "binance": "27000", "gecko": "price2", "ftx": "price3"}, 
            {"name": "ETH", "binance": "price1", "gecko": "price2", "ftx": "price3"}]

    //do something?
    //then change html value



    }

是否可以仅通过更改JS中的变量来更改html值？

或者是否有可能采取额外的代码？还是有别的办法？

Answer 1

更改HTML，使行具有基于硬币名称的唯一ID，并且列具有指示其角色的类。

<table class="table table-striped mb-0 fixed">
          <thead>
          <tr>
              <th>name</th>
              <th>binance</th>
              <th>gecko</th>
              <th>ftx</th>
          </tr>
          </thead>
          <tbody>
          {% for d in data %}
              <tr id="row-{{d.name}}">
                  <td class="name">{{ d.name }}</td>
                  <td class="binance">{{ d.binance }}</td>
                  <td class="ftx">{{ d.ftx }}</td>
                  <td class="okx">{{ d.okx }}</td>
              </tr>
          {% endfor %}
          </tbody>
</table>

然后您可以找到与positions_data相对应的行并更新它：

let row = document.querySelector(`#row-${positions_data.name}`);
let site = positions_data.site;
row.querySelector(`.${site}`).innerText = positions_data.price;