dom 2

123123

by ebaloSnositelXX

HTML

<div id="container">
    <table border="1" class="noselect" id="field"></table>
    <button id="changer">Сменить цвета</button>
</div>

CSS

table#field {
        border-collapse: collapse;
    }

    table.changed td.clicked {
        background-color: white;
    }

    table.changed td {
        background-color: black;
    }

    button#changer {
        margin-top: 10px;
    }

    td {
        width:  28px;
        height: 28px;
        cursor: pointer;
    }

    td.clicked {
        background-color: black;
    }

    /* http://web-answers.ru/questions-and-answers/html/kakoe-svoystvo-otklyuchaet-vyidelenie-teksta-na-css/ */
    table.noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

JavaScript

var TABLE_WIDTH  = 5;
var TABLE_HEIGHT = 5;

function createField(table) {
    for (var i = 0; i < TABLE_HEIGHT; i++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var j = 0; j < TABLE_WIDTH; j++) {
            var td = document.createElement("td");
            tr.appendChild(td);
        }
    }
    return table;
}
function changeColor(event) {
    var target = event.target;
    console.log(target);
    var s = getComputedStyle(target);
    target.classList.toggle(("clicked"));
}


function changeEveryColor(event) {
    /**
     var cells = document.querySelectorAll("table#field td");
     for (var i = 0; i < cells.length; i++) {
    cells[i].classList.toggle(("clicked"));
}
     */
    var table = document.getElementById("field");
    table.classList.toggle("changed");

}

var table  = document.getElementById("field");
var button = document.getElementById("changer");
table.onclick = function(event) {
	var target = event.target;
    target.classList.toggle(("clicked"));
}
button.onclick = function(event) {
	var table = document.getElementById("field");
    table.classList.toggle("changed");
}
table = createField(table);