Question

我有一个功能可以更改HTML表格中单击行的背景颜色，但是当我加载页面时，我必须在一行中单击两次才能更改颜色。

当我已经改变了一条线的背景颜色时，它没问题。我只能点击一次才能改变颜色。问题出在我刚刚加载页面时。

这是我的问题的一个例子：

HTML

<html>
    <head>
        <script type="text/javascript" src="main.js"></script>
        <style media="screen" type="text/css">
        table {border-collapse: collapse;} tr {border: 1px solid;} td {border: 1px solid;}
        </style>
    </head>

    <body onload="populateTable()">
        <table>
            <tbody id="fruitTable">
            </tbody>
        </table>
    </body>
</html>

的JavaScript

// POPULATE THE TABLE ON LOAD WITH SOME DATA
function populateTable () {
    var tableRef = document.getElementById('fruitTable');

    var newRow;
    var newCell1;
    var newCell2;

    // ADD LINE 1
    newRow = tableRef.insertRow(-1);
    newRow.style.background = '#98A2DD';
    newRow.onclick = colorActiveLine;
    newCell1  = newRow.insertCell(0);
    newCell2  = newRow.insertCell(1);
    newCell1.innerHTML = "apple";
    newCell2.innerHTML = "green";

    // ADD LINE 2
    newRow   = tableRef.insertRow(-1);
    newRow.style.background = '#98A2DD';
    newRow.onclick = colorActiveLine;
    newCell1  = newRow.insertCell(0);
    newCell2  = newRow.insertCell(1);
    newCell1.innerHTML = "banana";
    newCell2.innerHTML = "yellow";

    // ADD LINE 3
    newRow   = tableRef.insertRow(-1);
    newRow.style.background = '#98A2DD';
    newRow.onclick = colorActiveLine;
    newCell1  = newRow.insertCell(0);
    newCell2  = newRow.insertCell(1);
    newCell1.innerHTML = "coconut";
    newCell2.innerHTML = "white";
}

// CHANGE BACKGROUND COLOR ON CLICK
function colorActiveLine() {
    var lines = document.getElementsByTagName('tr');

    for (var i = 0; i < lines.length; ++i) {
        lines[i].onclick = function() {
            // SET ALL BACKGROUND COLOR TO BLUE
            for (var j = 0; j < lines.length; ++j) {
                lines[j].style.background = '#98A2DD';
            };
            // SET ALL BACKGROUND COLOR TO ORANGE
            this.style.background = '#DDC498';
        };
    }
}

提前致谢。

Answer 1

这是因为您的事件处理函数colorActiveLine将自己的匿名事件处理程序附加到文档中的每个<tr>元素，这里：

lines[i].onclick = function() {

在重新单击元素之前，不会执行此函数的内容。

Here is a JSFiddle，它表明如果删除colorActiveLine中新事件处理程序的附件，则第一次单击时该行会正确显示。

Answer 2

这是因为您已经嵌套了行中的onclick事件。

创建行后，将colorActiveLine分配给onclick事件。在colorActiveLine函数中，然后创建另一个匿名函数并将其分配给onclick，这个函数实际上会改变颜色，这就是你必须点击两次的原因。

你的colorActiveLine功能只需要这样：

// CHANGE BACKGROUND COLOR ON CLICK
function colorActiveLine() {

var lines = document.getElementsByTagName('tr');

    for (var i = 0; i < lines.length; ++i) {
        lines[i].style.background = '#98A2DD';
    }
    // SET ALL BACKGROUND COLOR TO ORANGE
    this.style.background = '#DDC498';

}

JS小提琴：http://jsfiddle.net/1xh5kk3p/

JavaScript：为什么我必须在表中单击两次才能执行colorActiveLine函数？

2 个答案: