Пропустить первый столбец в цикле таблицы в JS

#javascript

Вопрос:

Я пытаюсь запустить цикл над таблицей, которая будет иметь динамические входные данные, т.е. Ее размер будет корректироваться по мере добавления новых данных в БД.
И я пытаюсь создать цикл, чтобы я мог добавлять теги выбора в каждую ячейку таблицы, кроме первой строки и первого столбца (которые являются заголовками таблицы).
Я пропустил первую строку, используя <tbody> как селектор вместо целого <table> .
Что касается первого столбца, он состоит из <th> элементов, поэтому при выполнении моего цикла я попытался установить условие, при котором он изменяет только <td> подобное:

 const body = document.querySelector('tbody');
for (let row of body.rows)
{
    for(let cell of row.cells)
    {
        if(cell=="<td></td>"){ //The problem is here I need a way to do this comparison
            const slct=document.createElement("select");
            slct.classList='custom-select';
            for (const shift of shifts) {
                let opt=document.createElement("option");
                opt.innerHTML=`${shift}`;
                slct.append(opt);
            }
            cell.append(slct);
        }
    }
}

Увы, это не сработало, кто-нибудь может помочь с тем, как это сделать? Я посмотрел его, но не смог найти что-то, что я могу использовать.

1. Ячейка не является строкой и, скорее всего, не будет автоматически преобразовываться в ее innerHTML формат. Вы могли бы попробовать cell.outerHTML и посмотреть, работает ли это. Но на самом деле, если вы хотите пропустить первую ячейку, вам нужно просто пропустить ее, а не пытаться сопоставить с html

2. Используйте индекс коллекции (возможно, в традиционном for цикле) и пропустите индекс 0.

3. Вы могли бы попробовать cellIndex — if(cell.cellIndex > 0)

4. @Taplar я консоль. зарегистрируйте содержимое ячеек и увидели, что в нем есть это, <td></td> поэтому я подумал, что могу это использовать.

Ответ №1:

Вы можете использовать флаг и использовать его для игнорирования первого столбца для каждой строки.

 const body = document.querySelector('tbody');
for (let row of body.rows)
{  
   let isFirstColumn = true; // flag
   for(let cell of row.cells)
   {
       if(!isFirstColumn){
          const slct=document.createElement("select");
           slct.classList='custom-select';
           for (const shift of shifts) {
               let opt=document.createElement("option");
               opt.innerHTML=`${shift}`;
               slct.append(opt);
           }
           cell.append(slct);
       } else {
           isFirstColumn = false;
       }
    }
}

Ответ №2:

Используйте индекс коллекции (возможно, в традиционном цикле for ) и пропустите индекс 0.

Это указывает на идею, изменяя цвет фона столбцов, отличных от первого столбца (все ячейки начинаются с розового):

 const body = document.querySelector('tbody');
for (let row of body.rows)
{
    for(let i = 0; i < row.cells.length; i  )
    {
        if(i === 0) continue;
        row.cells[i].style.backgroundColor = 'blue';
    }
}

 td {
 width: 20px;
 height: 20px;
 background-color: pink;
 }

 <table>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>