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>
<input type="button" value="Поменять цвет всех квадратиков" id="changeColor"/>
</body>
</html>
 
td {
    border: 1px solid black;
}
​
#field {
    border-spacing: 0;
}
​
.black {
    background: black;
}
​
.white {
    background: white;
}
 
var dom = {};
​
dom.trim = function(str) {
    return str.replace(/^\s+|\s+$/g, '');
};
​
dom.hasClass = function(node, klass) {
    var newClasses = (node.className).replace(/\s+/g, ' ');
    return (' ' + newClasses + ' ').indexOf(' ' + klass + ' ') > -1;
};
​
dom.addClass = function(node, klass) {
    if (!node.className) {
        node.className = klass;
    } else if (!this.hasClass(node, klass)) {
        node.className += ' ' + klass;
    }
};
​
dom.removeClass = function(node, klass) {
    if (node.className && dom.hasClass(node, klass)) {
        var newClasses = node.className.replace(new RegExp('(\\s+|^)' + klass + '(\\s+|$)', 'g'), ' ');
        node.className = this.trim(newClasses);
    }
};
​
dom.toggleClass = function(node, klass) {
    if (dom.hasClass(node, klass)) {
        dom.removeClass(node, klass);
    } else {
        dom.addClass(node, klass);
    }
};
​
dom.addEvent = function(elem, type, handler) {
​
    if (document.addEventListener) {
        elem.addEventListener(type, handler, false);
    } else {
        elem.attachEvent("on" + type, handler);
    }
};
​
var button = 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';
    }
}
​
document.body.insertBefore(table, button);
​
dom.addEvent(table, 'click',    function(e) {
        
    var target = e && e.target || event.srcElement;
    
    if (target.tagName == 'TD') {
        dom.toggleClass(target, 'black');
    }
    return false;
});
​
dom.addEvent(button, 'click', function() {
    dom.toggleClass(table, 'black');
});
​
​
​
​
​
Output

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

Dismiss x
public
Bin info
fxslokerpro
0viewers