How to add css style in javascript

Sthokala
Sthokala used Ask the Experts™
on
Hi,
  I am creating a table in javascript like below

 var row=document.createElement("tr");
                        
 var cell=document.createElement("td");

How can I add css class for td element in javascript?

Thank you
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zvonko זְאֵבSystems architect
Top Expert 2006

Commented:
Like this:

var cell=document.createElement("td");
cell.className="yourClass";


Commented:
try

cell.className = 'myclass';
Use the below code:

cell.setAttribute("class", "YOURCLASSNAME");

Author

Commented:
Hi,
  Thank you so much for your reply. I tried both hte approaches, but it is not applying css. I need to apply bottom padding to the td'cell. Please let me know how can I do it.

Thank you
var row=document.createElement("tr");
				
				 var cell=document.createElement("td");
				 cell.className ="button-padding-bottom";
				 	var cellText=document.createTextNode(values[1]);
				 	
			 		cell.appendChild(cellText);
			 		row.appendChild(cell);
			 		
					 var cell1=document.createElement("td");
					
					 	var cellText1=document.createTextNode(values[2]);
					 	cell.setAttribute("class", "button-padding-bottom");
					 	
				 		cell1.appendChild(cellText1);
				 		row.appendChild(cell1);
				 		tblBody.appendChild(row);
				 		
				 		var cell2=document.createElement("td");
				 		cell2.setAttribute("class", "button-padding-bottom");
					 	var cellText2=document.createTextNode(values[3]);
					 	
				 		cell2.appendChild(cellText2);
				 		row.appendChild(cell2);
				 		tblBody.appendChild(row);
				 		
						var cell3=document.createElement("td");
						cell3.setAttribute("class", "button-padding-bottom");
						var cellText3=document.createTextNode(values[4]);
					 	cell3.appendChild(cellText3);
					 	cell3.setAttribute('title',values[4]);
				 		row.appendChild(cell3);
				 		tblBody.appendChild(row);
				 		
				 		
				 		var cell4 = document.createElement("td");
				 		
						var buttonnode= document.createElement('input');
						buttonnode.setAttribute('type','button');
						buttonnode.setAttribute('name',i);
						buttonnode.setAttribute('value','Order');
						buttonnode.setAttribute('id',values[1]);
						cell4.appendChild(buttonnode);
						cell4.setAttribute("class", "button-padding-bottom");
						 var procId=document.createElement("input");
						 procId.type = "hidden"; 
						 procId.id = "procId"+ i;
						 procId.value = values[0];
	    				  cell.appendChild(procId);

Open in new window

Systems architect
Top Expert 2006
Commented:
Check this:
<html>
<head>
<title>Zvonko &#42;</title>
<style>
.button-padding-bottom {
  background-color: cornflowerblue;
}
</style>
<script>
function doIt(theTab){
  values = "turqu,blue,red,yellow,green".split(",");
  tblBody = theTab.getElementsByTagName("tbody")[0];
  var row=document.createElement("tr");
				
  var cell=document.createElement("td");
  cell.className ="button-padding-bottom";
  	var cellText=document.createTextNode(values[1]);
  	
			 		cell.appendChild(cellText);
			 		row.appendChild(cell);
			 		
	  var cell1=document.createElement("td");
					
	  	var cellText1=document.createTextNode(values[2]);
	  	cell.setAttribute("class", "button-padding-bottom");
	  	
  		cell1.appendChild(cellText1);
  		row.appendChild(cell1);
  		tblBody.appendChild(row);
  		
  		var cell2=document.createElement("td");
  		cell2.setAttribute("class", "button-padding-bottom");
	  	var cellText2=document.createTextNode(values[3]);
	  	
  		cell2.appendChild(cellText2);
  		row.appendChild(cell2);
  		tblBody.appendChild(row);
  		
						var cell3=document.createElement("td");
						cell3.setAttribute("class", "button-padding-bottom");
						var cellText3=document.createTextNode(values[4]);
	  	cell3.appendChild(cellText3);
	  	cell3.setAttribute('title',values[4]);
  		row.appendChild(cell3);
  		tblBody.appendChild(row);  			   
}
</script>
</head>
<body>
<table onClick="doIt(this)" >
<tr><td>Click Me!</td></tr>
</table>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial