Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<a id="changeColor">Поменять цвет всех квадратиков</a>
</body>
</html>
 
td {
    border: 1px solid black;
    background: white;
}
​
.black {
    background: black;
}
​
.white {
    background: white;
}
 
function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}
​
function hasClass(node, klass) {
    var newClasses = (node.className).replace(/\s+/g, ' ');
    return (' ' + newClasses + ' ').indexOf(' ' + klass + ' ') > -1;
}
​
function addClass(node, klass) {
    if (!node.className) {
        node.className = klass;
    } else if (!hasClass(node, klass)) {
        node.className += ' ' + klass;
    }
}
​
function removeClass(node, klass) {
    if (node.className && hasClass(node, klass)) {
        var newClasses = node.className.replace(new RegExp('(\\s+|^)' + klass + '(\\s+|$)', 'g'), ' ');
        node.className = trim(newClasses);
    }
}
​
var a = document.getElementById('changeColor');
var table = document.createElement('table');
​
table.id = 'field';
    
for (var i = 0; i < 14; i++) {
    var newRow = table.insertRow(i);
    for (var n = 0; n < 14; n++) {
        var newCell = newRow.insertCell(n);
        newCell.width = '28px';
        newCell.height = '28px';
        addClass(newCell, 'white');
    }
}
​
document.body.insertBefore(table, a);
​
function addEvent(elem, type, handler) {
​
    if (document.addEventListener) {
        elem.addEventListener(type, handler, false);
    } else {
        elem.attachEvent("on" + type, handler);
    }
}
​
​
addEvent(document.getElementById('field'), 'click', function(e) {
        
    var target = e && e.target || event.srcElement;
    
    if (target.tagName == 'TD' && target.className == 'white') {
        removeClass(target, 'white');
        addClass(target, 'black');
    } else {
        removeClass(target, 'black');
        addClass(target, 'white');
    }
    return false;
});
​
addEvent(a, 'click', function() {
    for (var k = 0; k < table.rows.length; k++) {
        for (var j = 0; j < table.rows.length; j++) {
            if (table.rows[k].cells[j].className == 'white') {
                removeClass(table.rows[k].cells[j], 'white');
                addClass(table.rows[k].cells[j], 'black');
            } else {
                removeClass(table.rows[k].cells[j], 'black');
                addClass(table.rows[k].cells[j], 'white');
            }
        }
    }
});
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fxslokerpro
0viewers