Блог

Главная - Вопросы по программированию - Раскрасить определенные ячейки таблицы, созданные из массива javascript

Раскрасить определенные ячейки таблицы, созданные из массива javascript

#javascript #css #arrays

#javascript #css #массивы

Вопрос:

Я генерирую таблицу в javascript путем перебора массива. Я пытаюсь раскрасить текст определенных ячеек, в которых вычисленное число равно 10. Есть ли способ вызвать CSS в javascript? Это мой текущий код, выполняемый через html. В качестве альтернативы, есть ли способ применить CSS к стилям с использованием условных выражений?

 

<script>
var multitable;
numarray = [1, 2, 3, 4, 5];
           
multitable = "<table>"
for (row = 1; row < 6; row  ) {
   multitable  = "<tr>"
   for (col = 0, i = 0; col < 5; col  , i  ) {
       multitable  = "<td >"   row   "x"   numarray[i]   " = "   row * numarray[i]   "</td>"                
   }
    multitable  = "</tr>"
 }
 multitable  = "</table>"
 document.write(multitable);

</script>

Я пытался сделать что-то вроде:

 if (row*numarray[i] == 10)
    {
        // background colour green
    }

Ответ №1:

Вы можете проверить это при создании td и добавить класс в td 

 var multitable;
numarray = [1, 2, 3, 4, 5];

multitable = "<table>"
for (row = 1; row < 6; row  ) {
  multitable  = "<tr>"
  for (col = 0, i = 0; col < 5; col  , i  ) {
    const sumVal = row * numarray[i];
    multitable  = "<td class="   (sumVal === 10 ? 'color' : '')   " >"   row   "x"   numarray[i]   " = "   sumVal   "</td>"
  }
  multitable  = "</tr>"
}
multitable  = "</table>"
document.write(multitable);  
 .color {
  background: green;
}

Комментарии:

1. Ну, таким образом, у другого td's вообще не будет имен классов. НЕ рекомендуется добавлять классы без каких-либо имен к ним в DOM.

2. @AlwaysHelping я ответил на требование. Если бы ожидалось, что у другого td будет другой класс, то ответ был бы другим

Ответ №2:

Вы были почти у цели и на правильном пути — вы можете проверить, используя if условие, что total является 10 , а затем может быть применен class к этому element .

Кроме того, не рекомендуется печатать все, используя document.write вы можете использовать div element вместо этого, чтобы показать свой table .

Живая Демо-версия:

 var multitable;
numarray = [1, 2, 3, 4, 5];

multitable = "<table>"
for (row = 1; row < 6; row  ) {
  multitable  = "<tr>"
  for (col = 0, i = 0; col < 5; col  , i  ) {
    if (row * numarray[i] == 10) {
      multitable  = "<td class='red'>"   row   "x"   numarray[i]   " = "   row * numarray[i]   "</td>"
    } else {
      multitable  = "<td >"   row   "x"   numarray[i]   " = "   row * numarray[i]   "</td>"
    }
  }
  multitable  = "</tr>"
}
multitable  = "</table>"

document.querySelector('#results').innerHTML = multitable;  
 .red {
  background: red;
}

 table,
 table tr th,
 table tr td {
   border: 1px solid black;
 }  
 <div id="results"></div>

Ответ №3:

Если вычисленное число равно 10, просто добавьте css-класс, который выделяет эту строку / ячейку.