0

私はこのコードを持っています：

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

ホバー時またはフォーカス時に、表のセルの背景色を変更します。

現在、列の名前の 1 つが Status です。ステータスが遅れている場合、つまりそのセルの値が「遅れている」の場合、背景を に変更したいと思い#FFD7D7ます。これをjavascriptで書くとどうなりますか？

これ<style>は、CSS 内ではなく、html ファイルの先頭にあるため、少し迷っており、これを行う方法がわかりません。

どんな助けでも大歓迎です！

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

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 に答える
0

1 つの可能性は次のとおりです。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 に答える