找到你要的答案

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

Q:JavaScript:为什么我要点击两次表执行coloractiveline功能?

I have a function to change the background color of the clicked line in my HTML table but when I load the page I have to click twice in a line to change her color.

When I have already change the background color of a line, it is ok. I can click only once to change the color. The problem is only when I have just loaded the page.

Here an example of my problem :

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

Thanks in advance.

我有一个函数来改变我的HTML表格的一行的背景色但当我载我要点击两线改变她的彩色页。

When I have already change the background color of a line, it is ok. I can click only once to change the color. The problem is only when I have just loaded the page.

这里是我的一个例子:

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

先谢谢了。

answer1: 回答1:

It is because your event handler function colorActiveLine attaches its own anonymous event handler to each <tr> element in the document, here:

lines[i].onclick = function() {

The contents of this function are not executed until you re-click the element.

Here is a JSFiddle which demonstrates that if you remove the attachment of a new event handler within colorActiveLine, the row is coloured correctly when clicked for the first time.

那是因为你的事件处理函数coloractiveline重视自己的匿名事件处理程序的每个<;TR >;文档中的元素,在这里:

lines[i].onclick = function() {

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

这里是JSFiddle,这表明如果你删除一个新的事件处理程序内coloractiveline附件,行彩色正确点击后首次。

answer2: 回答2:

This is because you've nested the onclick events in your rows.

When the row is created, you assign colorActiveLine to the onclick event. In the colorActiveLine function, you then create another anonymous function and assign it to the onclick, and it's this function that actually changes the colour which is why you have to click twice.

Your colorActiveLine function just needs to be this:

// 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 Fiddle here: http://jsfiddle.net/1xh5kk3p/

这是因为你已经在你的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 Fiddle:http://jsfiddle.net/1xh5kk3p/

javascript  html  css  html5  css3