agregar la clase a un elemento

Question

Trato de escribir código para que éstos vista de cuadrícula a través de CSS :(jsbin)

var tables = document.getElementsByClassName('tableData'); 
    var rows = tables[0].getElementsByTagName('tr'); 
for(var i=1; i<rows.length; i +=2) { 
    alert(rows[i]); 
    rows[i].className = "alt"; 
} 

Esto sólo funciona con los elementos TR tiene class="". Pero si quiero agregar clase a tr. He intentado con Core.addClass pero no funciona.

Answer 1

Trate rows[i].className += " alt";

Answer 2

Esto debería funcionar incluso cuando el atributo no está presente:

rows[i].setAttribute("class", "alt"); 

http://www.w3schools.com/Dom/met_element_setattribute.asp

Answer 3

Es posible que desee utilizar un marco de JavaScript. Resulta que Firefox e Internet Explorer tienen diferentes enfoques para agregar nombres de clase.

Para Firefox, creo que usted tiene que hacer

element.setAttribute('class','<className>'); 

mientras que en IE, se puede hacer

element.className='<className>'; 

EDITAR

Resulta que Firefox es compatible con el atributo element.className . Sin embargo, Internet Explorer no comprende element.setAttribute('class'...). Debe hacer element.setAttribute('className'...) si desea usar la llamada a la función setAttribute.

jQuery proporcionan una interfaz donde se puede hacer

$(element).addClass('<className>'); 

y que se encarga de todas las ambigüedades del navegador. También existen funciones removeClass() y hasClass() para administrar y probar atributos de clase.

Así que en su escenario, que harías:

var tables = document.getElementsByClassName('tableData'); 
var rows = tables[0].getElementsByTagName('tr'); 
for(var i=1; i<rows.length; i +=2) { 
    // alert(rows[i]); 
    $(rows[i]).addClass("alt"); 
} 

Tenga en cuenta que usted podría simplificar esta más lejos con mayor funcionalidad de jQuery.

Answer 4

Esto sólo añadir el nombre de la clase si no existe ya

var classToAdd = 'alt'; 
if (rows.className.length == 0) 
{ 
    rows.className = classToAdd; 
} 
else if (rows.className.indexOf(classToAdd) < 0) 
{ 
    rows.className += ' ' + classToAdd; 
} 

Answer 5

Dos años más tarde (2012/06), hay un nuevo enfoque y brillante - element.classList con métodos add(), remove(), toggle() , .

rows[i].classList.add("alt"); 

apoyado por

• Cromo 8+
• Firefox 3.6+
• Internet Explorer 10
• Opera 11.50+
• Safari 5.1+