td content Javascript改变颜色和替换

Question

所以，我有一个带有文字的表格。表中有<th> 和<td>。在某些单元格上，根据单元格的文本，我希望背景更改某种颜色，如果某个特定单元格包含“+”号，我想更改颜色并删除“+”号。

这就是我所拥有的。当它到达一个空单元格并且“+”替换过于严格时，它会中断，即它只会在单元格中唯一的内容时删除“+”。如果是“8+”，则不会删除“+”号。

我是 Javascript 的新手。我相信这可以做得更简单。

<table>
<tr>
    <th>SAT</th>
    <th>SUN</th>
</tr>
<tr>
    <td>K</td>
    <td> </td>
    <td>8+</td>
</tr>
</table>
<script type="text/javascript">
function isEmpty( el ){
  return !$.trim(el.html())
  }


var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
var node = allTableCells[i];

//get the text from the first child node - which should be a text node
var currentText = node.childNodes[0].nodeValue; 

//check for certain content and assign this table cell's background color accordingly 
if (!isEmpty($(currentText))) {
if (currentText === "K")
    node.style.backgroundColor = "#ffff00";
else if (currentText === "+")
    node.style.backgroundColor = "#0070c0";node.childNodes[0].nodeValue = currentText.replace("+", " ");
}
}

var allTableHeaders = document.getElementsByTagName("th");
for(var ic = 0, max = allTableHeaders.length; ic < max; ic++) {
var node = allTableHeaders[ic];

//get the text from the first child node - which should be a text node
var currentHeadText = node.childNodes[0].nodeValue; 

//check for certain days of the week and assign this table cell's background color accordingly 
if (!isEmpty($(currentHeadText))) {
if (currentHeadText === "SAT")
    node.style.backgroundColor = "#ff0000";
else if (currentHeadText === "SUN")
    node.style.backgroundColor = "#91CF4F";
}
}
</script>

Answer 1

我认为您想检查 currentText 是否包含 +，而不是检查它们是否相等，

if (currentText.indexOf("+") > -1)
    node.style.backgroundColor = "#0070c0";
    node.childNodes[0].nodeValue = currentText.replace("+", " ");
}

Answer 2

只需要一些修改... 你使用 isEmpty 的方式，你不需要在它的参数上调用 .html() 。此外，正如前面的答案所建议的，使用 jQuery indexOf() 测试 currentText 中“+”的包含情况。

function isEmpty( el ){
  return !$.trim(el)
}

var allTableCells = document.getElementsByTagName("td");
for(var i = 0, max = allTableCells.length; i < max; i++) {
    var node = allTableCells[i];

    //get the text from the first child node - which should be a text node
    var $currentText = node.childNodes[0].nodeValue; 

    //check for certain content and assign this table cell's background color accordingly 
    if (!isEmpty($currentText)) {
        if ($currentText === "K")
            node.style.backgroundColor = "#ffff00";
        else if ($currentText.indexOf("+") != -1){
            node.style.backgroundColor = "#0070c0";
            node.childNodes[0].nodeValue = $currentText.replace("+", " ");
        }
    }
}

var allTableHeaders = document.getElementsByTagName("th");
for(var ic = 0, max = allTableHeaders.length; ic < max; ic++) {
    var node = allTableHeaders[ic];

    //get the text from the first child node - which should be a text node
    var currentHeadText = node.childNodes[0].nodeValue; 

    //check for certain days of the week and assign this table cell's background color accordingly 
    if (!isEmpty(currentHeadText)) {
        if (currentHeadText === "SAT")
            node.style.backgroundColor = "#ff0000";
        else if (currentHeadText === "SUN")
            node.style.backgroundColor = "#91CF4F";
    }
}