2

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

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

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 一起使用。

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

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

4

4 回答 4

0

在这里使用 jQuery 而不是直接的 js。我敢打赌，单击事件的侦听器仅绑定到绑定它时存在的项目（onclick 函数）。如果您通过 jQuery 设置侦听器，那么它甚至会在动态添加的组件上触发。

于 2013-03-21T01:24:32.963 回答
0

你尝试过使用 jQuery 吗？

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

我不确定，但我相信如果您不使用框架，则必须将单击功能显式附加到新添加的单元格。单独创建函数可能是最简单的

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

将函数附加到 init 上的单元格

cells.onclick = onClickHandler;

然后在创建时将其附加到每个元素

newCell.onclick = onClickHandler;

不确定是否有更直接的解决方案，希望它有所帮助。

于 2013-03-21T01:26:44.337 回答
0

哦，实际上，如果您尝试提醒单元格的类型，您将得到为什么没有触发点击的答案。

在这种情况下，cells是一个NodeList对象，它是一个数组HTMLTableCellElement。

您应该迭代单元格并添加 onclick 事件，如下所示：

for(var i=0; i<cells.length; i++) {
     cells[i].onclick = function () {
         cells[i].style.backgroundColor = "white";
     }
}
于 2013-03-21T01:32:18.193 回答
0

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

编辑

好的，这是一种删除blue类并将其添加到单击的类的方法：

// 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')，这是普遍支持的。

编辑 2

注意，我注意到有时可以不点击 a TD，所以我们应该首先检查它，table如果它不是 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/

于 2013-03-21T01:50:19.860 回答