Question

所以，我有一张带文字的桌子。表格中有<th>和<td>。在某些单元格上，根据单元格的文本，我希望背景可以更改某种颜色，如果它包含一个特定的单元格，则需要＆＃34; +＆＃34;标志，我想改变颜色并删除＆＃34; +＆＃34;登录。

这就是我所拥有的。当它到达一个空单元格并且＆＃34; +＆＃34;它会中断。替换太严格，即它将删除＆＃34; +＆＃34;只有这是细胞中唯一的东西。如果是＆＃34; 8 +＆＃34;它不会删除＆＃34; +＆＃34;标志。

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

td内容Javascript更改颜色并替换

2 个答案: