JavaScript表onclick [英] JavaScript table onclick

问题描述

我正在努力创建一个在表格中显示谚语的游戏。当您单击其中一个字母（或td）时，它会显示该字母。

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.

我删除空格/作者/等后使用Javascript创建表格。这是我用来创建表的代码。

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++;
}

我遇到的问题是onclick不能使用刚刚创建的td 。

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

我必须错过一个步骤或某事，我的代码中可能有一些小错误。也许有更好的方法来做到这一点。所有来源都可以在这里找到。 http://wikisend.com/download/831324/lab4.zip

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

推荐答案

我将使用一种方法更新，以便将突出显示切换为仅一个单元格。

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

编辑

好的，这是一种删除 blue 类的方法将其添加到被点击的那个：

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/

这使用 el.getElementsByClassName（），大多数现代浏览器和IE9及更高版本都支持。当然，另一种选择可能是做另一个 tbody.getElementsByTagName（'td'），这是普遍支持的。

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.

编辑2

注意，我注意到有时候可能不会点击 TD ，所以我们应首先检查并忽略点击表如果它不是 td ：

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/

这篇关于JavaScript表onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！