2016-01-13 135 views
-3

也许我不清楚。假设我有三行,并使用第二行的复选框,那么我只希望该行改变颜色,其他行将保持不变。对不起,我可怜的解释。用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"; 
+3

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

+0

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

回答

1

尝试遍历标签:

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'); 
    } 
}); 
+0

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

+0

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

+0

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

1

您需要循环: 要使用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'); 
    } 
}); 
+0

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

+0

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

-1

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" 
})