Avatar of Sthokala
Sthokala
Flag for United States of America 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
JavaScriptCSS

Avatar of undefined
Last Comment
Zvonko

8/22/2022 - Mon
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");

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question