Question

我有这段代码：

<style>
    [contenteditable]:hover, [contenteditable]:focus {
        background: #D7D7FF;
        }
</style>

让表格中的单元格背景在悬停或聚焦时会改变颜色。

现在其中一个列的名称是Status。如果状态为迟，意味着该单元格的值为“迟到”，我希望背景更改为#FFD7D7。我怎么用javascript写这个？

由于这个<style>位于html文件的开头而不是CSS内部，我有点迷失，不知道该怎么做。

非常感谢任何帮助！

Answer 1

$('.status').on('blur keyup paste', function() {
  $this = $(this);
  $(this).css('background', ($this.text() == 'Late') ? 'red' : 'inherit');
});

其中每个状态单元格都有status类

Answer 2

如果你不想使用jQuery，这里是JavaScript中的代码

http://jsfiddle.net/u72yF/3/

color = function() {
    var table = document.getElementById('myTable');
    var trList = table.getElementsByTagName('tr');
    // index of the status column
    var index = -1;
    for (var i = 0; i < trList.length; i++) {
        var tdList = trList[i].getElementsByTagName('td');
        if (index < 0) {
            // we need to find out the status column index first
            for (var j = 0; j < tdList.length; j++) {
                if (tdList[j].id == 'statusColumn') {
                    index = j;
                    break;
                }
            }
        }
        if (tdList[index].innerHTML.trim() == 'Late') {
            // for constant coloring
            trList[i].style.background = '#FFD7D7';

            // for on hover coloring 
            //trList[i].onmouseover = function() { 
            //  this.style.background = '#FFD7D7'; 
            //} 
            //trList[i].onmouseout = function() { 
            //  this.style.background = ''; 
            //}
        }
     } 
 }

我假设，代码不知道哪个列是状态列，因此包含检测（通过id“statusColumn”）。然后仅在此列中搜索“Late”字符串，忽略其他字符串。

如果通过着色你的意思是悬停着色而不是恒定着色（我演示过），请删除底部的注释，这将实现此目的。

Answer 3

一种可能性如下。 IMO，使用jQuery可以更清楚地表达这一点，但是由于你没有提到它，我们将在这个上面使用JavaScript：

<!DOCTYPE html>
<html>
<head>
<style>
    [contenteditable]:hover, [contenteditable]:focus {
        background: #D7D7FF;
        }

    .late {
        background-color: #FFD7D7;
    }
</style>
<script type="text/javascript">
    function checkStatus(ev) {
        var statusField = document.getElementById("status-field");

        if (statusField.textContent == 'Late') {
            statusField.className += " late";
        } else {
            statusField.className = statusField.className.replace(/(?:^|\s)late(?!\S)/g , '');
        }

        return true;
    }
</script>
</head>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Status</th>
        </tr>
        <tr>
            <td contenteditable="true">Juan Carlos</td>
            <td id="status-field" contenteditable="true" onblur="return checkStatus()">Early</td>
        </tr>
    </table>
</body>
</html>

当value =“Late”时更改单元格的背景颜色

3 个答案: