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 table, after removing spaces/author/etc. Here is the code I used to create the table.

function createRow(tableRowId, startIndex, endIndex) {
    var row = document.getElementById(tableRowId);
    var index = startIndex;

    while(index <= endIndex){
        //hints array contains the letters to be displayed
        if(hints[index] != undefined){
            var newCell = row.insertCell(-1);
            var newText = document.createTextNode(hints[index]);
            newCell.appendChild(newText);
        }
        else{
            break;
        }
        index++;
}

The problem I have is that onclick wont work with the td that were just created.

var cells = document.getElementsByTagName("td");
cells.onclick = function (){
    cells.style.backgroundColor = "white";
}

I must be missing a step or something, maybe some small error in my code. Maybe there is a better way of doing this. All the source can be found here. http://wikisend.com/download/831324/lab4.zip

回答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/

回答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.

回答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.

回答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";
     }
}

来源：https://stackoverflow.com/questions/15537803/javascript-table-onclick

标签

javascript

onclick

html-table

appendchild