為從 javascript 數組創建的某些表格單元格着色

Question

我正在通過循環遍歷一個數組在 javascript 中生成一個表。 我正在嘗試為計算出的數字為 10 的某些單元格的文本着色。有沒有辦法在 javascript 中調用 CSS？ 這是我當前正在運行的 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
    }

Answer 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; }

Answer 2

你快到了，並且在正確的軌道上 - 你可以檢查使用if條件是否總數為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>

Answer 3

如果計算出的數字是 10，只需添加一個突出顯示該行/單元格的 css-class。