Jquery Applying CSS to Dynamically created table rows

Question

I have a HTML table, with rows being generated dynamically using Jquery. The rows are created fine and the dynamically-generated Ids work perfectly. I want to adjust the width of a table cell that is generated every time.

<table border='1' id='foresttable'>
                        <tr>
                            <td id='addforestcell'><img id='addforestimg' src='img/addsign.png' onclick="forestrotate()"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Forest Area #1</td>
                            <td><img src='img/cancel.png' href="#" title='Start Over' onclick="clearForest();" class='deletebtn'> Place a Forest/Group of Trees on the Map</td>
                        </tr>
                    </table>

Here is the JQuery:

 $(function(){
var tbl = $("#foresttable");

$("#addforestimg").click(function(){
    $("<tr><td>Forest Area #"+forestnum+"</td><td class='forestcol2'><button class='red mapbtn' onclick='changecolor(this);' id='forestbutton"+forestnum+"'> Place markers to define forested area #"+forestnum+"</button></td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td><button class='delRowBtn'>Delete</button></td></tr>").appendTo(tbl); 
    if(forestnum>1){
        $("#foresttable tr:nth-last-child(2)").html("<tr><td>Forest Area #"+(forestnum-1)+"</td><td class='forestcol2'><button class='red mapbtn' onclick='changecolor(this);' id='forestbutton"+(forestnum-1)+"'> Place markers to define forested area #"+(forestnum-1)+"</button></td><td>Lorem Ipsum</td><td>Lorem Ipsum</td><td><button class='delRowBtn'>Delete</button></td></tr>");
    }
    $(".forestcol2").css("width", 800);
forestnum++;
});      
$(document.body).delegate(".delRowBtn", "click", function(){
    $(this).closest("tr").remove(); 

});    

});

Every row created comes with a delete button, however I only want the last row to be deletable, so when a new row is created I alter the html of the second last row to remove it's delete button.

This all works fine, but I cannot change width of the second-last row whenever it is created. Well, I can, but only by using a series of ID selectors in CSS eg

#forestbutton1{}
#forestbutton2{}
etc...

I have tried applying a class to each row created (.forestcol2) as you can see above and it works when they're created, but not when I change the 2nd last element? I have also tried:

$(".forestcol2").css("width", 800);

but no luck.

Stumped here any help would be much appreciated.

Answer 1

I noticed you wrote following code in your js.

tr:nth-last-child(2)

It selected the second last element tr of your table. It is useful, right? You don't need to know what the id is here but only the position.

And you know, css also supported similar features. For you requirements, it should like this.

#foresttable tr:nth-last-child(2){
 // any properties you want here
}

More features please visit CSS3 :nth-last-child() Selector

Answer 2

Many hours later,

It wasn't css or the JQuery, they were working perfectly. After using Chrome Developer Tools I could see they were being applied successfully, but something was overwriting them and setting width to 68px, another style or something.

I spent about 4 hours digging through everything trying to find what was causing the problem but no luck.

As the program is several thousand lines long, its not worth digging any further, I'm just going to use the Dynamic ID's.

But thanks to everyone whob answered/commented.