Search code examples
javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Adding a class to dynamic Bootstrap Table rows


So I want to add a class to my table rows except the header but I can't figure out how to do it. Does somebody know how i can do this?

this is my table:

<table id="table" class="hidden table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th data-field="variant">Variant</th>
            <th data-field="description">Description</th>
        </tr>
    </thead>
</table>

and this is currently where i add the data and want to add the classes to the rows

$('#table').bootstrapTable({
    data: returnValue
});

Solution

  • 1st : add tbody tag in html table

    2nd : simple add the class for you tbody tr only like this

    $('#table tbody tr').addClass("newclass");
    

    HTML :

    <table id="table" class="hidden table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th data-field="variant">Variant</th>
                <th data-field="description">Description</th>
            </tr>
        </thead>
        <tbody>  //tbody added here  
            <tr>
            ....
            </tr>
        </tbody>
    </table>
    

    In jquery

    $('#table tbody tr').addClass("newclass");