Переключение цвета фона ячейки таблицы, созданной с помощью JavaScript - PullRequest
Новая
       39

Переключение цвета фона ячейки таблицы, созданной с помощью JavaScript

2 голосов
/ 18 мая 2011

У меня проблема: Мне нужны ячейки таблицы 7x48, эти ячейки имеют цвет фона (серый), который должен быть переключаемым при нажатии (зеленый), а затем снова переключаться другим щелчком. Я создал таблицу со следующей функцией js: 

function createGrid(){
// get the reference for the body
    var grid = document.getElementById("grid");
    var green="#33CC66";
    var grey="#DEDEDE";

    // creates a <table> element and a <tbody> element
    var tbl     = document.createElement("table");
    var tblBody = document.createElement("tbody");
    tbl.id="timegrid";
    tbl.style.backgroundColor=grey;
    // creating all cells
    for (var j = 0; j < 7; j++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var i = 0; i < 48; i++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");

            cell.onmousedown=function(){
                if(this.style.backgroundColor!=grey)
                this.style.backgroundColor=grey;
                else this.style.backgroundColor=green;                  

            };
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);
    // appends <table> into <div id="grid">
    grid.appendChild(tbl);
    tbl.setAttribute("cellPadding", "7");
    tbl.setAttribute("cellSpacing", "0");
    tbl.setAttribute("border", "1");}

Проблема в том, что он работает в первый раз (с серого ячейка переключается на зеленый), но я не могу вернуться к исходному цвету при втором щелчке по той же ячейке. Любое предложение?

1 Ответ

2 голосов
/ 18 мая 2011

Проблема в том, что браузер не сохраняет то же значение, которое вы установили.

Например, если вы сделаете 

document.body.style.backgroundColor = '#33cc66'
console.log(document.body.style.backgroundColor);

Вы получите rgb(51, 204, 102) возвращено.(И пусть будет известно, что StackOverflow отвратительный с зеленым фоном.)

Это значение является функциональной нотацией для цвета .

Youвероятно, вам нужно сохранить значение, которое вы установили, потому что браузеры несовместимы в том, как они сообщают текущее значение цвета. 

cell.onmousedown=function(){
    if(background !== grey) {
        this.style.backgroundColor=grey;
        background = grey;
    } else {
        this.style.backgroundColor=green;      
        background = green;            
    }
};
...