使用Javascript根据值更改表数据值的颜色

问题描述

我是JS新手。我试图根据值更改表单元格上的文本颜色：Y或N。 我已经尝试了互联网上的所有内容，但似乎无济于事。

这是我要格式化的表数据

function changeValue(bool) {
    if (bool) {
        return "Y";
    } else {
        return "N";
    }
}

var els = document.getElementsByClassName('colorText');
    for (var i = 0; i < els.length; i++) {
        var cell = els[i];
    if (cell.textContent === "N") {
        cell.classList.remove('red');
    } if (cell.textContent === "Y") {
        cell.classList.remove('green');
    } 
}

<td class="centered colorText">{changeValue(someValue)}</td>

解决方法

对于类td's的所有colorText，您可以简单地使用querySelectorAll方法

使用定义的CSS类

也使用toggle代替add或remove方法。如果有点击事件，toggle则更简单易用。

此外，要使用td，您需要将它们包装在table中才能正常工作。

实时演示

window.addEventListener('DOMContentLoaded',(event) => {
  var els = document.querySelectorAll('.colorText');
  els.forEach(function(cell) {
    if (cell.textContent === "N") {
      cell.classList.toggle('red');
    }
    if (cell.textContent === "Y") {
      cell.classList.toggle('green');
    }
  })
})

.green {
  color: green;
}

.red {
  color: red;
}

<table>
  <tr>
    <td class="centered colorText">Y</td>
    <td class="centered colorText">N</td>
    <td class="centered colorText">Y</td>
    <td class="centered colorText">N</td>
  </tr>
</table>

使用JS DOM CSS方法

您还可以使用.style方法color来文本，具体取决于textContent 代替使用自定义CSS类。

window.addEventListener('DOMContentLoaded',(event) => {
  var els = document.querySelectorAll('.colorText');
  els.forEach(function(cell) {
    if (cell.textContent === "N") {
      cell.style.color = 'red';
    }
    if (cell.textContent === "Y") {
      cell.style.color = 'green';
    }
  })
})

<table>
  <tr>
    <td class="centered colorText">Y</td>
    <td class="centered colorText">N</td>
    <td class="centered colorText">Y</td>
    <td class="centered colorText">N</td>
  </tr>
</table>

,

您可以使用此代码。

我假设您已经有一个css文件，其类为“红色”和“绿色”。

function changeValue(bool) {
        if (bool) {
            return "Y";
        } else {
            return "N";
        }
    }


        var els = document.getElementsByClassName('colorText');
            for (var i = 0; i < els.length; i++) {
                var cell = els[i];
            if (cell.textContent === "N") {
                cell.classList.remove('red');//I am not sure if you mean to color the text green if it says "N"
                cell.classList.add('green')
            } if (cell.textContent === "Y") {
                cell.classList.remove('green');
                cell.classList.add('red')
            } 
    }

<td class="centered colorText">Y</td>

,

在获取TD标签之前，您需要设置适当的HTML表

function changeValue(bool) {
    if (bool) {
        return "Y";
    } else {
        return "N";
    }
}

var els = document.getElementsByClassName('colorText');
for (var i = 0; i < els.length; i++) {
  var cell = els[i];
  if (cell.textContent === "N") {
    cell.classList.remove('red');
  } if (cell.textContent === "Y") {
    console.log('boom');
    cell.classList.remove('green');
  } 
}

<table>
  <tr>
    <td class="colorText">X</td>
    <td class="colorText">Y</td>
    <td class="colorText">Z</td>
  </tr>
</table>

,

单个td标签无法正常工作。我使用了span，它起作用了。

function changeValue(bool) {
        if (bool) {
            return "Y";
        } else {
            return "N";
        }
    }


        var els = document.getElementsByClassName('colorText');
            for (var i = 0; i < els.length; i++) {
                var cell = els[i];
            if (cell.textContent === "N") {
                cell.classList.remove('green');
                cell.classList.add('red');
            } if (cell.textContent === "Y") {
                cell.classList.remove('red');
                cell.classList.add('green');
            } 
    }

.green { color:green; }
.red { color:red; }

<span class="centered colorText">Y</span>

更新：

当我使用正确的table，tr和td时，它可以工作。

function changeValue(bool) {
        if (bool) {
            return "Y";
        } else {
            return "N";
        }
    }


        var els = document.getElementsByClassName('colorText');
            for (var i = 0; i < els.length; i++) {
                var cell = els[i];
            if (cell.textContent === "N") {
                cell.classList.remove('green');
                cell.classList.add('red');
            } if (cell.textContent === "Y") {
                cell.classList.remove('red');
                cell.classList.add('green');
            } 
    }

.green { color:green; }
.red { color:red; }

<table><tr><td class="centered colorText">Y</td></tr></table>