Как заполнить таблицу тд

Question

Я создал таблицу, и мне нужно заполнить tds, используя JavaScript, потому что данные поступают с сервера. Вот моя таблица:

<table id="report" class="infoRecurso" id='testExportId' style="width: 100%; color: #363636">
<thead style="color: #363636">
    <tr class='btn-danger' style="background-color: lightgray; color: #363636">
        <th class="thData">Data</th>
        <th id="timeIniticial" class="thInicio">Início</th>
        <th class="thTermino">Término</th>
        <th class="thDuracao">Duração</th>
        <th class="thAtividades">Atividades</th>
    </tr>
</thead>
<tbody id="myTable">
    <tr>
        <td style="text-align: left;"></td>>
        <td id="inicialTime"></td>
        <td>Hora Final</td>
        <td style="text-align: left;">Duração</td>
        <td colspan="1" class="quebraLinha" style="text-align: left;"></td> 
    </tr>
    <tr>
        <th class="horasTotaisTh" colspan="3"> Horas Totais </th>
        <th class="resultadoHorasTotaisTh" colspan="4">Hora Total</th>
    </tr>
</tbody>

Я пытаюсь заполнить td идентификатором inicialTime, который соответствует tr timeIniticial. Я пытался использовать этот код:

var data = [{"product": "RD0"}, {"product": "RD1-184"}, {"product": "RD1-185"}];
var table = $('.infoRecurso');
$.each(data, function(i, value) {
    table.find('tr').eq(i).find("td[id='inicialTime']").text(value.product);
});

, но этот код заполняет только первую позицию.

Как мне заполнить остальные позиции tds?

Answer 1

Ваш вопрос оставляет несколько вопросов открытыми, поэтому я могу только догадываться, что вы действительно хотите. В следующем фрагменте я собрал решение, которое будет .prepend() некоторый html код вашей таблицы, чтобы ваш второй столбец всегда заполнялся кодом из вашего массива данных. Я изменил атрибут id этого элемента <td> на class, поскольку идентификаторы всегда должны быть уникальными.

Я также "исправил" ваши атрибуты colspan в последней строке таблицы, поскольку в нем только 5 столбцов всего.

var data = [{"product": "RD0"}, {"product": "RD1-184"}, {"product": "RD1-185"}];

var html=data.map(({product})=>
`<tr><td></td><td class="inicialTime">${product}</td><td>Hora Final</td>
 <td>Duração</td><td class="quebraLinha"></td></tr>`).join('')

$('.infoRecurso tbody').prepend(html);

 td {text-align:left}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="infoRecurso" id='testExportId' style="width: 100%; color: #363636">
<thead style="color: #363636">
    <tr class='btn-danger' style="background-color: lightgray; color: #363636">
        <th class="thData">Data</th>
        <th class="thInicio">Início</th>
        <th class="thTermino">Término</th>
        <th class="thDuracao">Duração</th>
        <th class="thAtividades">Atividades</th>
    </tr>
</thead>
<tbody id="myTable">
 <tr>
   <th class="horasTotaisTh" colspan="3"> Horas Totais </th>
   <th class="resultadoHorasTotaisTh" colspan="2">Hora Total</th>
 </tr>
</tbody>