用javascript改变颜色

问题描述：

也许我不清楚。假设我有三行，并使用第二行的复选框，那么我只希望该行改变颜色，其他行将保持不变。对不起，我可怜的解释。用javascript改变颜色

row.insertCell(3).innerHTML = '<input type="checkbox" value="check" onclick="ChangeBackgroundColor(this)">' 

function ChangeBackgroundColor(status){ 
    if (status.checked == true) { 
     var x = document.getElementById("myTableData").getElementsByTagName("tr") 
     x[1].style.backgroundColor = "green";

你通过所有包含在'x'元素需要循环，并设置它们的颜色。 –

也许我不清楚。假设我有三行，并使用第二行的复选框，那么我只希望该行改变颜色，其他行将保持不变。对不起，我可怜的解释。 – korvar

答

尝试遍历标签：

function ChangeBackgroundColor(status) { 
    if (status.checked == true) { 
     var x=document.getElementById("myTableData").getElementsByTagName("tr"); 
     for (var i=0; i<x.length; ++i) { 
      x[i].style.backgroundColor = "green"; 
     } 
    } 
}

UPDATE：

$('#myTableData').on('change', 'input[type=checkbox]', function() { 
    var self = $(this); 
    if (self.is(':checked')) { 
     self.closest('tr').css('background-color', 'green'); 
    } 
});

也许我不清楚。假设我有三行，并使用第二行的复选框，那么我只希望该行改变颜色，其他行将保持不变。对不起，我可怜的解释。 – korvar

@korvar使用jQuery查看我更新的答案。 – jcubic

真棒，谢谢@jcubic然而，如果你不介意我问，这改变了复选框的颜色，如果我想整行改变？我试过使用“previoussibling”，但似乎没有工作。 – korvar

答

您需要循环：要使用jQuery它会像获得选定行的颜色变化通过包含在x中的所有元素并设置其颜色：

function ChangeBackgroundColor(status){ 
    if (status.checked) { 
     var x = document.getElementById("myTableData").getElementsByTagName("tr"); 
     for (var i = 1; i < x.length; i++) { 
      x[i].style.backgroundColor = "green"; 
     } 
    } 
}

或者当你标记的jQuery：

只改变父行使用此：

function ChangeBackgroundColor(status){ 
    if (status.checked) { 
     status.parentNode.style.backgroundColor = "green"; 
    } 
} 

// jQuery alternative: 
$('#myTableData').on('change', ':checkbox', function(e) { 
    if (this.checked) { 
     $(this).closest('tr').css('background-color', 'green'); 
    } 
});

也许我不清楚。假设我有三行，并使用第二行的复选框，那么我只希望该行改变颜色，其他行将保持不变。对不起，我可怜的解释。 – korvar

我为你更新了我的答案。 –

答

JavaScript不具有的功能，以一次更改多个元素的属性。

我会用for循环。

(function(){ 
     var c,d; 
     HTMLCollection.prototype.LP=NodeList.prototype.LP=Array.prototype.LP=function(a,b){ 
      d=this.length; 
      if(!b) 
       for(c=0;d>c;c++)a(c); 
      else 
       for(c=0;d>c;c++){if(!a(c))break} 
      } 
}())

现在使用querySelectorAll ......

var q=document.querySelectorAll(".class, tagName or #id"); 
q.LP(function(i){ 
    q[i].style.backgroundColor="#ffb" 
})

用javascript改变颜色

相关推荐