JavaScript Table Onclick

I'm working on creating a game where a proverb is displayed in a table. When you click on one of the letters (or td) then it displays the letter. I used Javascript to create the t

Solution 1:

I'll update with a method to toggle the highlight to only one cell.

EDIT

Ok, here is a method to remove the blue class and add it to the one which was clicked:

// Remember el.attachEvent('onclick', ...) for IE8 and lower
base.addEventListener('click', function delegate(e){
    var cells = tbody.getElementsByClassName('blue'),
        i = 0,
        cell;

    while (cell = cells[i++]) {
        cell.className = cell.className.replace(/\bblue\b/g, '');
    }

    e.target.className += ' blue';
});

http://jsfiddle.net/xwgyK/1/

This uses el.getElementsByClassName(), which is supported by most modern browsers and IE9 and greater. An alternative, of course, could be to do another tbody.getElementsByTagName('td'), which is universally supported.

EDIT 2

Note, I noticed sometimes it's possible not to click a TD, so we should first check for that and ignore the click on table if it's not a td:

base.addEventListener('click', function delegate(e){
    var cells = tbody.getElementsByClassName('blue'),
        i = 0,
        cell;

    if (e.target.nodeName.toLowerCase() == 'td') {
        while (cell = cells[i++]) {
            cell.className = cell.className.replace(/\bblue\b/g, '');
        }

        e.target.className += ' blue';
    }
});

http://jsfiddle.net/xwgyK/2/

HTML

<table id="base">
    <tbody></tbody>
</table>

Javascript

var base = document.getElementById('base'),
    tbody = base.getElementsByTagName('tbody')[0],
    numrows = 30,
    numcols = 10,
    col = 0,
    row = "<tr>{row}</tr>",
    rows = "",
    cell = "<td>{cell}</td>",
    cells = "";

// Remember el.attachEvent('onclick', ...) for IE8 and lower
base.addEventListener('click', function delegate(e){
    e.target.style.backgroundColor = 'blue';
});

while (numrows--) {
    cells = "";
    col = 0;

    while (col++ < numcols) {
        cells += cell.replace('{cell}', col);
    }

    rows += row.replace('{row}', cells);
}

tbody.innerHTML = rows;

http://jsfiddle.net/xwgyK/

Solution 2:

Use jQuery here instead of straight js. My bet is that your listener for the click event is only bound to the items that are present when you bind it (the onclick function). If you set up a listener through jQuery, then it will fire even on components that are dynamically added.

Solution 3:

Did you try using jQuery?

$(document).on('click', 'td', function(e) { cells.style.backgroundColor = "white"; });

I am not sure, but I believe that you'll have to explicitly attach the click function to the newly added cell if you're not using a framework. It will probably be simplest to create the function separately

function onClickHandler (){
    cells.style.backgroundColor = "white";
}

Attach the function to the cells on init

cells.onclick = onClickHandler;

and then attach it to the every element upon creation

newCell.onclick = onClickHandler;

Not sure if there's a more straight forward solution, hope it helps.

Solution 4:

Ohh, actually if you try to alert the type of cells, you will get the answer why the the click is not triggered.

In this case, cells is an NodeList object, which is a array of HTMLTableCellElement.

you should iterate the cells and add onclick event like following:

for(var i=0; i<cells.length; i++) {
     cells[i].onclick = function () {
         cells[i].style.backgroundColor = "white";
     }
}