基于单元格值的颜色行答案

【问题标题】：Color row based on cell value基于单元格值的颜色行
【发布时间】：2013-03-21 20:25:24
【问题描述】：

我有一个包含特定列的表格，其中单元格仅包含“R”、“N”或“Y”。我想根据提到的这些值中的任何一个为行着色。任何建议都会有所帮助

这是我所拥有的，但它不会改变行颜色

  var rows = document.getElementById("trans_separate").getElementsByTagName("tbody")
  [0].getElementsByTagName("tr");

    // loops through each row
    for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');

            if (cells[14].innerText == R)
                rows[i].className = "red";

            else if (cells[14].innerText == Y)
                rows[i].className = "Yellow";

            else if (cells[1].innerText == N)
                null

 }

【问题讨论】：

if (cells[14].innerText == 'R') ...
控制台应该直接引导您找到答案。如果您打算使用 Javascript，那么学习如何使用控制台以及 Chrome 调试器或 FireBug 是必不可少的。
你真的需要先获取 tbody 再获取 tr 再获取单元格吗？我想document.getElementById("trans_separate").getElementsByTagName('td') 足以获得您需要的所有单元格。
是的，我可以这样做。谢谢
如果thead 有tds 而不是ths 怎么办？可能有问题。模棱两可的编码会伤害你。

标签： javascript

【解决方案1】：

在 Ubuntu 上的 Firefox 中工作：jsfiddle

附言应该是else-if。如果里面的文本是'R'，那么你不应该评估'Y'。

var rows = document.getElementById("trans_separate").getElementsByTagName("tbody")[0].getElementsByTagName("tr");

for (i = 0; i < rows.length; i++) {
    row = rows[i].getElementsByTagName('td');
    var cell = getText(row[0]);
    if (cell === 'R') rows[i].className = "red";
    else if (cell === 'Y') rows[i].className = "yellow";
}

function getText(cell) {
    return (cell.innerText == undefined) ? cell.textContent : cell.innerText;
}

【讨论】：

【解决方案2】：

工作示例：

var rows = document.getElementById("trans_separate").getElementsByTagName("tbody")
  [0].getElementsByTagName("tr");

    // loops through each row
    for (i = 0; i < rows.length; i++) {cells = rows[i].getElementsByTagName('td');

            if (cells[0].innerHTML == 'R')
                rows[i].className = "red";

            if (cells[0].innerHTML == 'Y')
                rows[i].className = "yellow";           
 }

http://jsfiddle.net/mMFwQ/4/

【讨论】：

if (cells[0].textContent === 'R') rows[i].className = "red";
我会检查cells[0].innerText是否未定义，如果是：获取cells[0].textContent
textContent 在旧的 IE 浏览器中不起作用。可能是if ((cells[0].textContent || cells[0].innerText) == 'R') rows[i].className = "red";可以帮忙的情况吗？
当我应用“alert(cells[14].innerText);”时，我在单元格中得到了返回值，但是当我尝试应用 className 来设置行的样式时没有任何反应。