如何将表行附加到具有特定类的最后一行？

Question

I'm trying to append a row to the html format of an asp data grid. My grid is having paging and that too is converted as a row in the html format. So, I added a class to the rows with the actual records. Now, i need to append an html table row to the grid. This should be appended towards the end of the records. Somebody knows how to do this?

Table Structure:

<table>
    <th>
    </th>
    <tbody>
        <tr class="clientData">1</tr>
        <tr class="clientData">2</tr>
        <tr class="clientData">3</tr>
        <tr>Exclude This Row</tr>
        <tr>Exclude This Row</tr>
    </tbody>
</table>

Script:

{ $("#ctl00_Content_GrdCustomer tbody").append(selCustomersRow); } // 

Answer 1

Something like

$('#ctl00_Content_GrdCustomer tbody tr.clientData').last().after(selCustomersRow);

Or like Angel's comment, select directly the last tr.clientData :

$('#ctl00_Content_GrdCustomer tbody tr.clientData:last').after(selCustomersRow);

http://api.jquery.com/after/

Answer 2

A better way would be to use the correct table tags.

ie

<table>
    <thead>
        <tr>
            <td>Column header 1</td>
            <td>Column header 2</td>
            <td>Column header 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Column footer 1</td>
            <td>Column footer 2</td>
            <td>Column footer 3</td>
        </tr>
    </tfoot>
</table>

You may not need to have a header, but you can stick all of your "records" within the tbody and your pagination within the tfoot.

This way you can use

$("#ctl00_Content_GrdCustomer tbody").append(selCustomersRow);

Which will append the row to the end tbody, but before the pagination within the tfoot.

Answer 3

尝试...

  { $("#ctl00_Content_GrdCustomer tbody tr").last().append(selCustomersRow); }