JQuery - добавление нескольких значений к одному элементу в таблице

Question

Я использую flask. Я передаю 4 различных списка в файл HTML, через них l oop и помещаю их значения в таблицу

{% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_percent)%}
          <tr>
            <td id="task-pid">{{s_pid}}</td>
            <td id="task-name">{{s_name}}</td>
            <td id="task-cpu-percent">{{s_cpu_percent}}</td>
            <td id="task-memory-percent">{{s_memory_percent}}</td>
          </tr>
{% endfor %}

Это выглядит великолепно, и я могу ясно видеть каждое значение в таблице

Мне нужно обновлять эти значения каждые 5 секунд, и для этого я использую jquery (используя ajax просто для получения обновленного значения и вставьте значения ниже, например var task_status_cpu_percent = data["task status cpu percent"]; (list))

for(var i = 0; i< task_status_pid.length; i++){
      $("#task-pid").text(task_status_pid[i]);
      $("#task-memory-percent").text(task_status_memory_percent[i]);
      $("#task-name").text(task_status_name[i]);
      $("#task-cpu-percent").text(task_status_cpu_percent[i]);
    }

task_status_pid - это список, фактически все task_status являются списками одинаковой длины, но когда код jquery накапливается, он ничего не делает! Я попытался использовать replaceWith, и это не go хорошо, что произошло, так как все значения были на первой вкладке.

что мне нужно сделать, чтобы go через все значения в task-pd имя-задачи et c 'как на l oop ({% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_percent)%})

Answer 1

Вам необходимо использовать класс или добавить счетчик к идентификатору. Идентификаторы ДОЛЖНЫ быть уникальными

Так ИЛИ

{% set count = namespace(value=0) %}
{% for (s_pid, s_name, s_cpu_percent, s_memory_percent) in zip(pid, name, cpu_percent, memory_percent)%}
          <tr>
            <td id="task-pid{{count.value}}">{{s_pid}}</td>
            <td id="task-name{{count.value}}">{{s_name}}</td>
            <td id="task-cpu-percent{{count.value}}">{{s_cpu_percent}}</td>
            <td id="task-memory-percent{{count.value}}">{{s_memory_percent}}</td>
          </tr>
  {% set count.value = count.value + 1 %}
{% endfor %}

, а затем

 $("#task-pid"+i).text(task_status_pid[i]);

ИЛИ (рекомендуется)

const $tasks = $(".task-pid");

for(var i = 0; i< task_status_pid.length; i++){
  $tasks.eq(i).text(task_status_pid[i]);
   ....
}

с использованием <td class="task-pid" et c