Add class to an element

Question

I try to write these code to make grid view through 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";
}

This only works with the tr elements has class="" . But if I want to add class to tr . I've tried Core.addClass but it doesn't work .

​

Answer 1

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

Answer 2

This should work even when the attribute isn't already present:

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

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

Answer 3

You might want to use a Javascript framework. It turns out that Firefox and Internet Explorer both have different approaches for adding class names.

For Firefox, I believe you have to do

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

while in IE, you can do

element.className='<className>';

EDIT

It turns out that Firefox supports the element.className attribute. However, Internet Explorer doesn't understand element.setAttribute('class'...). You have to do element.setAttribute('className'...) if you want to use the setAttribute function call.

jQuery provide an interface where you can do

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

and it takes care of all the browser ambiguities. There are also removeClass() and hasClass() functions for managing and testing class attributes.

So in your scenario, you'd do:

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

Note that you could simplify this further with more jQuery functionality.

Answer 4

This will only add the class name if it doesn't already exist

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