CODEWITHSUNDEEP
javascripthtmlcssajaxhtml-table
Ryan
Ryan

Reputation: 15250

How can I display progress bar as table row background?

I have a table like this:

th1    th2    th3    th4    th5    th6
td1    td2    td3    td4    td5    td6
td1    td2    td3    td4    td5    td6

New table rows are added with a form above that runs a background process to calculate all the data in each td. The process can take 10-60 seconds.

Rather than a separate column that displays progress, I'd like to shade the background of the entire tr as it corresponds to the % completion of the calculation process.

For example:

th1    th2    th3    th4    th5    th6
$ 1    $ 2    $ 3    $ 4    $ 5    $ 6   [100% done, 100% of row shaded light green]
$ -    $ -    $ -    $ -    $ -    $ -   [ 40% done,  40% of row shaded light green]

Background only:

th1    th2    th3    th4    th5    th6
||||||||||||||||||||||||||||||||||||||   [100% done, 100% of row shaded light green]
|||||||||||||||                          [ 40% done,  40% of row shaded light green]
|||||||||                                [ 25% done,  25% of row shaded light green]
||||                                     [ 10% done,  10% of row shaded light green]

What do you recommend?

Here's some general markup:

<table>
    <thead>
        <tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th><th>th5</th><th>th6</th></tr>
    </thead>
    <tbody>
        <tr data-progress="100"><td>$1</td><td>$2</td><td>$3</td><td>$4</td><td>$5</td><td>$6</td></tr>
        <tr data-progress="40"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
        <tr data-progress="25"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
        <tr data-progress="10"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
    </tbody>
</table>

Upvotes: 8

Views: 7371

Answers (3)

drspa44
drspa44

Reputation: 1051

In case anyone is still looking for an elegant solution, you can style your tr. For a progress bar of 40%, I'd use:

<tr style="background-image: linear-gradient(to right,lightgrey 40%,white 40%)">

Example: https://codepen.io/drspa44/pen/rYEzWj

Upvotes: 3

Pedro L.
Pedro L.

Reputation: 7536

For my solution you need an extra div in the first td of each tr but it looks pretty cool. Still needs some improvements but you get the idea...

DEMO http://jsfiddle.net/CBJjv/2/

Call this function after updating data-progress values.

var updateProgress = function () {
    var trs = document.querySelectorAll('.table-body tr');
    for (var i=0; i<trs.length; i++) {
        var tr = trs[i];
        var pr = tr.querySelector('.progress');
        pr.style.left = (tr.dataset.progress - 100)+'%';
        pr.style.height = tr.clientHeight + 'px';
    }
}

Instead of playing with the position, you could also have a fixed position and modify the width of the div

Works in Chrome, not tested in other browsers.

Upvotes: 12

Tim Mickey
Tim Mickey

Reputation: 361

I agree that putting a background image on the tr is the way to go. However, you will need to change the display of the tr, and background percentages do not work the way you expect. Avoid using % in your background image position and just use px. You can calculate the width of your table, take your percentage and convert to px. 

td { 
    display: block; 
    background: transparent url(shade-of-grey.gif) no-repeat scroll 0 0; 
}

Upvotes: 0

Related Questions