The forEach method in JavaScript is a standard from the new ECMA5 script specifications.
It can be used as it is if the applied to a node list, such as something returned from a function like document.querySelectorAll(”) or document.getElementById(‘id’).
The whole point of this trick it’s this one:
NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
We add the forEach prototype method to HTML collections and arrays.
So I have prepared a simple script that generates a table and colorize the table using the native forEach method.
/**
* How does this script works.
* first create a new table, select all the cells with
* document.getElementsByTagName('td') or document.querySelectorAll('td')
* and then add color and some text using a forEach statement
*/
// Add the forEach method of a nodeList to HTML collections and arrays.
NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;
// Easy to be changed to have randomHEX, just make sure the string of each color have two chars!
function randomRGB() {
var r,g,b,base=10,maximum=256;
r = intRandom(maximum,base)
g = intRandom(maximum,base)
b = intRandom(maximum,base)
return ('rgb('+ r +','+ g +','+ b +')');
}
function intRandom(max,base) {
return Math.round(max*Math.random()).toString(base);
}
function createTable(col,row) {
var i,j,t,tr,td
t=document.createElement('table')
for(i=0;i<col;i++){
var tr = document.createElement('tr')
for(j=0;j<row;j++) {
var td = document.createElement('td')
td.innerHTML = '<p> </p>'
tr.appendChild(td)
}
t.appendChild(tr)
}
return t
}
function colorateTable() {
var tds = document.getElementsByTagName('td')
,bgcolor
//let's use our forEach!
tds.forEach(function(e,i,a){
bgcolor = randomRGB()
e.style.backgroundColor = bgcolor
e.innerHTML = bgcolor
})
}
// Let's create the table
window.onload = document.body.appendChild(createTable(5,5))
// and now colorate and fill up the table
colorateTable()
You can download the code from here.