根據單元格內容更改單元格顏色

Question

我有一些基本的JavaScript代碼來掃描HTML表格的單元格，並根據確切的值更改背景顏色，例如，如果單元格值為5，則將顏色更改為紅色，這樣就可以正常工作：

var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == "5") {
    cells[i].style.backgroundColor = "red";
    }   
}

典型表內容：

現在，我的表格單元格實際上全部包含[當前/不存在]數字，格式為例如2/0（2個存在，0不存在）和2/1（2個存在，1不存在）。

我正在嘗試突出顯示“ /”后面的數字大於0的單元格，換句話說，僅突出顯示缺少的單元格。

由於我對JavaScript完全陌生，因此我正在努力尋找一種實現此目的的方法。 任何幫助，將不勝感激！

謝謝。

Answer 1

您可以通過/分割innerHTML並檢查其是否大於0：

if (cells[i].innerHTML.split("/")[1] > 0) {
    cells[i].style.backgroundColor = "red";   
}

如果您的單元格中不包含/ ，則不會引發錯誤，因此您應該首先添加一個檢查。

var splitted = cells[i].innerHTML.split("/");
if (splitted.length > 1 && splitted[1] > 0) {
    // ...
}

Answer 2

在撰寫本文時，沒有看到您的HTML，我能提供的最好的是：

// retrieve all the <td> elements within a <table>
// Use a more specific selector than 'table', such
// as a class-name or id if you have multiple <table>
// elements:
var tableCells = document.querySelectorAll('table td'),

    // converts the collection of <td> elements into
    // an Array, using Array.from():
    tableCellsArray = Array.from( tableCells ),

    // finds a sequence of one or more (+) number (\d)
    // characters following a slash (\/):
    reg = /\/\d+/,

    // 'empty' variable for use within the
    // (later) Array.prototype.forEach():
    number;

// iterating over each of the <td> elements in the
// array we created earlier using Array.prototype.forEach():
tableCellsArray.forEach(function(cell){
  // 'cell': a reference to the current <td> in the
  // array of <td> elements over which we're iterating.

  // here we use String.prototype.match()
  // to recover the matching number(s), if any,
  // from the text-content of the <td>:
  number = cell.textContent.match(reg);

  // if no match then number will be equal to null,
  // so we first test that there is a match and
  // if there is we convert the found number into
  // a base-10 number using parseInt() and test if
  // that found number is greater than zero:
  if (number && parseInt(number[1], 10) > 0) {

    // if both the above are true, then here we
    // use the Element.classList API to add the
    // 'hasAbsences' class to the current <td>
    // element:
    cell.classList.add('hasAbsences');
  }
});

並在CSS中指定.hasAbsences類。

 var tableCells = document.querySelectorAll('table td'), tableCellsArray = Array.from(tableCells), reg = /\\/(\\d+)/, number; tableCellsArray.forEach(function(cell) { number = cell.textContent.match(reg); if (number && parseInt(number[1], 10) > 0) { cell.classList.add('hasAbsences'); } }); 

 table { border-collapse: collapse; } td { border: 1px solid #000; padding: 0.2em 0.5em; text-align: center; } td.hasAbsences { background-color: red; } 

 <table> <tbody> <tr> <td>1/2</td> <td>2/0</td> <td>3/0</td> <td>4/0</td> <td>5/1</td> </tr> <tr> <td>1/0</td> <td>2/0</td> <td>3/-1</td> <td>4/0</td> <td>5/0</td> </tr> <tr> <td>1/0</td> <td>2/2</td> <td>3/0</td> <td>4/6</td> <td>5/0</td> </tr> </tbody> </table> 

JS小提琴演示 。

Answer 3

它僅包含數字嗎？

一種方法是使用parseInt innerHTML：

 var cells = document.getElementById("test").getElementsByTagName("td"); for (var i = 0; i < cells.length; i++) { if (parseInt(cells[i].innerHTML.split('/')[1]) > 0) { cells[i].style.backgroundColor = "red"; } } 

 <table id="test"> <tr> <td> 0/0 </td> <td> 1/0 </td> <td> 2/1 </td> </tr> </table> 

編輯：得到錯誤的問題編輯。

Answer 4

請試試這個。

var cells = document.getElementById("test").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML.indexOf('/') > -1 && parseInt(cells[i].innerHTML.split("/")[1]) > 0) {
    cells[i].style.backgroundColor = "red";
    }   
}