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

JavaScript : Why do i have to click twice in the table to execute the colorActiveLine function?

本文关键字：两次 执行 函数 colorActiveLine 单击 为什么      更新时间：2023-09-26

我有一个函数来改变我的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';
        };
    }
}

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

lines[i].onclick = function() {

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

下面是一个JSFiddle，它演示了如果你在colorActiveLine中删除了一个新的事件处理程序的附件，当第一次点击时，行是正确的颜色。

这是因为您已经在您的行中嵌套了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/

相关文章：