如何使用JavaScript為表中添加的新行設置ID或CSS選擇器

Question

我已經編寫了用於向表中添加新行的代碼，請參見下面的代碼

$("#example tbody tr").each(function(i, object) {       
        var safeHtml= gwt.@com.my.sample.client.gwt.GWTExpandCollapse::getRowValue(I)(i);//Calling GWT Java Method which return HTML                
         $(object).after(safeHtml); //Inserting new row     
        //How to assign (ID or CSS) to the above inserted row
    });

上面的代碼工作正常，但我需要為新插入的行分配（ID或CSS選擇器），我對其進行了搜索，但未找到任何線索。如何使用Javascript進行此操作？

注意：請參見下圖，新添加的行可能在行內包含任何思考。

Answer 1

您可以使用.attr（）

    $("#example tbody tr").each(function(i, object) {       
        var safeHtml= gwt.@com.my.sample.client.gwt.GWTExpandCollapse::getRowValue(I)(i);//Calling GWT Java Method which return HTML     
        var newSafeHtml = $.parseHTML(new String(safeHtml.toString()).replace("<tr>", "<tr id='item"+i.toString()+"'>"));
         $(object).after(newSafeHtml); //Inserting new row
    });

Answer 2

演示版

html

<table style="width:100%">
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
</table>

的CSS

.yourclassname1 {
    color:red;
}
.yourclassname2 {
    color:green;
}

jQuery的

var i = 1;
$("tr").each(function () {
    var safeHtml = '<tr><td>test</td><td>test</td><td>test</td></tr>';
    $(this).after(safeHtml);
    $(this).next().addClass("yourclassname"+i);
    i = i+1;
});

Answer 3

使用以下代碼設置css選擇器，

$("#example tbody tr").each(function(i, object) {       
        var safeHtml= gwt.@com.my.sample.client.gwt.GWTExpandCollapse::getRowValue(I)(i);             
         $(object).after(safeHtml); //Inserting new row     
         $(object).next().addClass("hideShow");
    });