How do I set a style on a dynamically added row

JavaScript
1

Hi

I have a table where I have added 10 rows with 5 columns
http://ectpro.co/test/table1.html

I need to change the style of the Quantity textbox for the “Full User License” and “Limited User License”
I want to change the style to .quantity-editable for these 2 and
I want to change the rest to .quantity-readonly

How do I go about doing this?

2

Hi there,

Are you asking how to add and remove class names using JS, or is this a CSS question?

3

I would like to know how to add and remove classes using JS
I think I can handle the css on my own thanks :slight_smile:

4

If el points to the element you want to update the class on and cl is the class to be added or removed from that element then you can do it as follows:

addClass = function(el,cl) {
var re = new RegExp('\\\\b'+cl+'\\\\b');
if (!el.className.match(re)) el.className += " "+cl;
}

removeClass function(el,cl) {
var re = new RegExp('\\\\b'+cl+'\\\\b');
if (el.className.match(re))
el.className=el.className.replace(re,' ');
}

This leaves any other classes on the same element unaffected by the add or remove and ensures the same class doesn’t get added twice.

5

This is also worth a read: Change an element’s CSS class with JavaScript