Using Progressbars In Tables

Using the jQuery UI progressbar widget in a table column, and using other column values to configure it.

by MichaelWan

HTML

<table>
 
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Progress</th>
        </tr>

    <tbody>
        <tr>
            <td>20</td>
            <td>30</td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 40%;
}

table th {
    text-align: left;
}

JavaScript

// Look at each table row.
$( "table tbody tr" ).each(function() {
    
    // Local variables - the table row, and the newly-created
    // progressbar div.
    var $this     = $( this ),
        $progress = $( "<div/>" ).css( "font-size", "0.6em" )
                                 .appendTo( $this.find( "td:nth-child(1)" ) );
    
    // Instantiates the progressbar widget using other column
    // values as the "max" and the "value" options.
    $progress.progressbar({
        value: parseInt( $this.find( "td:nth-child(12)" ).text() ),
        max: parseInt( $this.find( "td:nth-child(11)" ).text() )
    });
    
});