SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I set a style on a dynamically added row

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,014
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2009
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Are you asking how to add and remove class names using JS, or is this a CSS question?
    I would like to know how to add and remove classes using JS
    I think I can handle the css on my own thanks

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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:

    Code:
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,014
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •