Javascript 当值=”时更改单元格的背景色；“迟交”；_Javascript_Html_Css_Background

Javascript 当值=”时更改单元格的背景色；“迟交”；

javascript html css

Javascript 当值=”时更改单元格的背景色；“迟交”；,javascript,html,css,background,Javascript,Html,Css,Background,我有一段代码： <style> [contenteditable]:hover, [contenteditable]:focus { background: #D7D7FF; } </style> [内容可编辑]：悬停[内容可编辑]：焦点{ 背景：#D7D7FF； } 使表格中单元格的背景在悬停或聚焦时更改颜色现在，其中一列的名称是Status。如果状态为late，表示该单元格的值为=“late”，我希望背景更改为#FFD7

我有一段代码：

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


[内容可编辑]：悬停[内容可编辑]：焦点{
背景：#D7D7FF；
}

使表格中单元格的背景在悬停或聚焦时更改颜色

现在，其中一列的名称是Status。如果状态为late，表示该单元格的值为=“late”，我希望背景更改为

#FFD7D7

。我将如何用javascript编写这个

因为这个

是在html文件的开头，而不是在CSS中，所以我有点不知所措，不知道怎么做

非常感谢您的帮助

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

每个状态单元格都有

status

class

如果您不想使用jQuery，下面是JavaScript中的代码

color=function（）{
var table=document.getElementById（'myTable'）；
var trList=table.getElementsByTagName（'tr'）；
//状态列的索引
var指数=-1；
对于（变量i=0；i


我假设，代码不知道哪个列是状态列，因此包含一个检测（通过id“statusColumn”）。然后只在该列中搜索“Late”字符串，忽略其他字符串
如果您所说的着色是指悬停着色而不是恒定着色（我已经演示过了），请删除底部的注释，它实现了这一点。
一种可能性如下。在我看来，使用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>


[内容可编辑]：悬停[内容可编辑]：焦点{
背景：#D7D7FF；
}
.晚了{
背景色：#FFD7D7；
}
功能检查状态（ev）{
var statusField=document.getElementById（“状态字段”）；
如果（statusField.textContent=='Late'）{
statusField.className+=“迟到”；
}否则{
statusField.className=statusField.className.replace（/（？：^\s）late（？！\s）/g'；
}
返回true；
}
名称
地位
胡安·卡洛斯
早
用户可以编辑状态单元格值吗？请发布一个示例代码，说明如何检查表格。这可能会对您有所帮助。@wachK是的，用户更改单元格的状态，理想的做法是在加载时进行，当它失去焦点时，检查用户是否更改了单元格的值。您可以发布html吗？
<!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>