0

我有这段代码：

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

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

现在列的名称之一是状态。如果状态迟到，意味着该单元格的值为 =“迟到”，我希望背景更改为#FFD7D7. 我将如何用javascript编写这个？

因为这<style>是在 html 文件的开头而不是在 CSS 中，所以我有点迷茫，不知道该怎么做。

任何帮助是极大的赞赏！

4

3 回答 3

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

每个状态单元都有status类

于 2013-06-05T17:14:36.890 回答
0

一种可能性如下。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>
于 2013-06-05T19:38:40.367 回答
0

如果你不想使用 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”字符串，忽略其他字符串。

如果通过着色是指悬停着色而不是恒定着色（我演示过），请删除底部的注释，它实现了这一点。

于 2013-06-05T17:23:05.127 回答