Question

我有一个表结构，我想根据值更改背景颜色。

例如

<td class="tg-yw42">0</td>
<td class="tg-yw43">1</td>
<td class="tg-yw44">0</td>

因此，如果值为=＆gt; 0应用绿色背景，否则保持原样。

希望这有意义

Answer 1

由于你将jquery放在标签中，这里是jQuery解决方案。您可以使用$.each()遍历所有<td>，使用text()检查值并相应地应用一个类。

$('td').each(function() {
var $this = $(this)
  if ($this.text() == 0 ) {
    $this.addClass('active');
  }
});

.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="tg-yw42">0</td>

    <td class="tg-yw43">1</td>

    <td class="tg-yw44">0</td>
  </tr>
</table>

Answer 2

您可以遍历表格行并根据表格单元格css的条件应用text == 0。

$("table td").map(function () {
  if (parseInt($(this).text()) === 0) $(this).css("background-color", "green")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
	<tr>
		<td class="tg-yw42">0</td>
		<td class="tg-yw43">1</td>
		<td class="tg-yw44">0</td>
	</tr>
</table>

ES6方式：

$("table td").map((i, el) => parseInt($(el).text()) === 0 ? $(el).css("background-color", "green") : "")

Answer 3

您可以使用jQuery选择器.text()来获取所选元素的内容。

例如

$('td.tg-yw42').text()

将返回0（指定元素的内容）。

现在你可以将它与.each()结合起来，$('td').each(function() { var nr = $(this).text(); /* other code */ });将为jQuery选择器找到的每个元素执行指定的函数。

所以这段代码：

td

将遍历所有$('#tiles').addClass(tiles_in).one(animation_end, function(event) { log('tiles in, event=' + event.type); });元素，并将变量nr设置为其内容。然后，您所要做的就是使用条件来设置背景或任何您想要的内容。

Answer 4

你可以用jQuery做到这一点。

首先获取所有tds： tds = $(document).getElementsByTagName("td")

然后遍历数组：

for( td of tds){
  assignColor(td);
}

 // The function giving the background color
function assignColor($element){
    switch ($element.text()){
      case '0':
        element..css("background-color", "yellow");
      default:
        break
    }
 }

根据数字值更改td元素的背景颜色

4 个答案: