Question

我有一些基本的JavaScript代码来扫描HTML表格的单元格，并根据精确值更改背景颜色，例如，如果单元格值为5，则将颜色更改为红色，这样可以正常工作：< / p>

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类。

＆＃13;

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');
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

JS Fiddle demo

Answer 3

它只包含数字吗？

一种方法是使用parseInt innerHTML：

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：错误地编辑了问题..

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

根据细胞内容更改细胞颜色

4 个答案: