asked on

How to add css style in javascript

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

Zvonko

Like this:

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

cmalakar

try

cell.className = 'myclass';

Tomarse111

Use the below code:

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

Sthokala

ASKER

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

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial