JavaScript change css

Question

var html = '<table style="width: 100%;border:0.5px solid white; border-spacing:0px; nth-child(even) {color:#ffffff;}"><tr style="background-color:#E9EDDB;padding-top:5px;"><td id="serNum" style="font-family:Segoe UI;font-size:16px;color:#000;text-align:center;width:5%;">' + count + '</td><td style="width: 30%; text-align: left;font-family:Segoe UI;font-size:16px;color:#000;height:auto;overflow-x:none;"><span id="taskDesc" style="">' + i.Description + '</span></td><td style="width: 8%;padding-left:5px; text-align: left;font-family:Segoe UI;font-size:16px;color:#000;"><span id="taskPriority">' + i.Priority + '</span></td><td style="width: 8%; text-align: left;font-family:Segoe UI;font-size:16px;color:#000;"><span id="taskType">' + i.Status + '</span></td><td style="width: 15%; text-align: left;font-family:Segoe UI;font-size:16px;color:#000;"><span id="taskDesc">johnsmith- ' + creatdDate + '</span></td><td style="width: 15%; text-align: left;font-family:Segoe UI;font-size:16px;color:#000;"><span style="display:none" id="taskID">' + i.ID + '</span><select id="dropDown" name="dropDown"><option value="default" SELECTED>Select</option><option value="deleteTask" >DeleteTask</option><option value="createRmndr">CreateReminder</option></select></td></tr></table>';
           items.push(html);
           count++;

using this lot of columns will be generated for my project i want to change odd columns color but i am unable to change it can any one tell me how to change background color for odd and even columns. I have tried this css but this property is not working in JavaScript so please tell me how to do this ..

nth-child(odd)
{ 
    background:#ff0000;
}

Samuel Liew · Accepted Answer · 2013-02-14 07:44:26Z

2

You have to use the !important keyword to override the inline styles applied to the table.

nth-child(odd)
{ 
   background:#ff0000 !important;
}

This will have to be placed in a stylesheet, and cannot be used inline.

answered Feb 14, 2013 at 7:44

Samuel Liew

79.5k112 gold badges173 silver badges318 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CaptainCarl · Accepted Answer · 2013-02-14 07:44:19Z

0

td:nth-child(odd) {  
  color: #ccc;
}

From: http://css-tricks.com/how-nth-child-works/

answered Feb 14, 2013 at 7:44

CaptainCarl

3,4996 gold badges42 silver badges74 bronze badges

Comments

icaru12 · Accepted Answer · 2013-02-14 07:48:23Z

0

You must specify nth-child of what element, syntax: element:nth-child(n) { style properties }

td:nth-child(odd)
{ 
   background:#ff0000;
}

answered Feb 14, 2013 at 7:48

icaru12

1,59216 silver badges21 bronze badges

Collectives™ on Stack Overflow

JavaScript change css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related