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

我有一个函数来改变我的HTML表格中单击行的背景颜色，但是当我加载页面时，我必须在一行中单击两次以更改她的颜色。JavaScript：为什么我必须在表格中单击两次以执行colorActiveLine函数？

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

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

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

在此先感谢。

来源

2015-08-15 Mat_48

这是因为你的事件处理函数colorActiveLine重视自己的匿名事件处理程序，以每<tr>元素的文档中，在这里：

lines[i].onclick = function() {

这个函数的内容不会被执行，直到你再次点击该元素。

Here is a JSFiddle它演示如果您删除colorActiveLine中的新事件处理程序的附件，该行在第一次单击时将被正确着色。

来源

2015-08-15 14:16:29 sdgluck

这是因为你在行中嵌套了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/

来源

2015-08-15 14:21:09 beercohol

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

回答

相关问题