使用 JavaScript 更改行表颜色答案

【问题标题】：Change row table color with JavaScript使用 JavaScript 更改行表颜色
【发布时间】：2017-07-17 17:26:12
【问题描述】：

我尝试使用 JavaScript 更改表格中行的背景，但它不起作用。这是我的code。但是，我尝试使用 html 及其工作创建一个表。 P.S : 我想用 webkit。

代码：

var table = document.getElementById("tab");
var rowCount = table.rows.length;


for(var i=0;i<6;i++) {     
   row = table.insertRow(rowCount);
   row.id = "row"+i;
   cell1 = row.insertCell(0);
   var content = document.createElement("output");                
   content.innerHTML = i ;
   cell1.appendChild(content);
   rowCount++;
}


 $(document).ready(function(){
        $('td').each(function(i) {     
             $('#tab').on('click', '#row'+i, function(){
                document.getElementById("row"+i).style.background = 'white';
                 //alert(i);
             });   
        });   

     //example2
     $('#td1').on('click', function(){
                document.getElementById("td1").style.background = 'white';
             });   
 });

【问题讨论】：

不要“使用 webkit”——使用标准。绝对不要使用outdated webkit gradient specification。

标签： javascript jquery css background html-table

【解决方案1】：

您遇到的问题是因为您在TD 上设置背景渐变，然后设置TR 的背景颜色。由于 TD 在 TR 内，您只是看不到您的更改被应用。

【讨论】：

如何使用 javaScript 添加 TR ？
您可以更改 JS，也可以更改 CSS。请参阅此小提琴更新，了解如何使用更新的 CSS 获得所需内容：jsfiddle.net/e2rYy/18
@SlimMils 感谢接受的答案，因为更新 CSS 确实可以解决您的问题，但您应该接受并使用 Mike McCaughan 的答案。它会表现得更好并保持您的解决方案更清洁
@nybler：更适合我的问题的解决方案是你的。我看到了 Mike 的回答，感谢他的努力。

【解决方案2】：

您不应该在循环中分配事件处理程序，尤其是当您不需要时：

$('#tab').on('click', 'tr', function () {
    $('td,th', this).css('background', 'white');
});

fiddle.

【讨论】：

【解决方案3】：

这是背景颜色，而不是背景。

【讨论】：

@SlimMils：HTML、CSS 和 JavaScript DOM 是不同的技术。因此，对于相同的功能，它们可以有不同的名称。
正如@JohnFisher 所说。 JavaScript 使用 camelCase（例如 backgroundColor，而不是 css 中的 background-color）。

【解决方案4】：

第一个问题是关闭问题.. ..

Click 事件将始终指向 i 的最后一个实例。

把你的代码改成这个

$('td').each(function(i) {
     (function(num) {
        $('#tab').on('click', '#row' + num, function() {
           document.getElementById("row" + num).style.background = '';
          //alert(i);
        });
     })(i)
 });

这可能不是非功能代码的主要原因..

【讨论】：

【解决方案5】：

您要更改整行或当前单元格的颜色吗？您当前的选择器仅适用于特定单元格。

// for the complete row
$(document).ready(function(){
    $('td').on('click',function(){
        $(this).closest('tr').find('td').css({'background':'red'});
    });
}); 

// or for the active cell..
$(document).ready(function(){
    $('td').on('click',function(){
        $(this).css({'background':'red'});
    });
});

有关行解决方案，请参阅此小提琴 http://jsfiddle.net/axelmichel/2KUCz/。如果您希望每个表具有不同的行为，您可以在以下位置修改选择器：

$('#tab').find.('td').on('click',...

【讨论】：