Question

我有一个HTML表，使用Jquery动态生成行。行创建得很好，动态生成的ID工作得很好。我想调整每次生成的表格单元格的宽度。

<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>

这是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(); 

});    

});

创建的每一行都带有一个删除按钮，但是我只希望最后一行是可删除的，所以当创建一个新行时，我改变第二行的html以删除它的删除按钮。

这一切都运行正常，但无论何时创建，我都无法更改倒数第二行的宽度。嗯，我可以，但只能在CSS中使用一系列ID选择器 e.g。

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

我已尝试将一个类应用于创建的每一行（.forestcol2），如上所示，它在创建时有效，但在我更改第二个最后一个元素时却没有？我也尝试过：

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

但没有运气。

难倒在这里任何帮助都会非常感激。

Answer 1

我注意到你在js中写了以下代码。

tr:nth-last-child(2)

它选择了表格的第二个最后一个元素 tr 。这很有用，对吗？你不需要知道这里的id是什么，而只知道这个位置。

你知道，css也支持类似的功能。对于你的要求，它应该是这样的。

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

更多功能请访问CSS3 :nth-last-child() Selector

Answer 2

许多小时后，

它不是css或JQuery，它们工作得很好。使用Chrome开发者工具后，我可以看到它们已成功应用，但有些东西覆盖它们并将宽度设置为68px，另一种样式或其他东西。

我花了大约4个小时挖掘所有试图找到导致问题但没有运气的东西。

由于该程序长达数千行，不值得深入挖掘，我只是想使用动态ID。

但感谢所有回答/评论的人。

Jquery将CSS应用于动态创建的表行

2 个答案: