jQuery UI: Using Progressbars In Tables

The jQuery UI progressbar widget can be used as cell content in a table row. This is always a useful depiction of percentages for the user. Generally, we use API data to populate the progressbar maximum, and current value. But if we're rendering the widget in a table row, we might want to base the values on sibling cell values.

Here's an example that does just that. For the table in question, we just need to iterate over all rows. In each iteration, we put a progressbar div in the cell where we want the widget displayed. We then instantiate the progressbar widget using values from other cells as the max and the value options. It's worth noting that we're responsible for passing valid numbers to the widget options, and not their string representations.