Wie kann ich den Fortschrittsbalken als Tabellenzeilenhintergrund anzeigen?

Question

Ich habe eine Tabelle wie folgt aus:

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

Neue Tabellenzeilen mit einem Formular hinzugefügt werden oben, dass ein Hintergrundprozess läuft in jedem td alle Daten zu berechnen. Der Vorgang kann 10-60 Sekunden dauern.

Anstatt eine separate Spalte, die den Fortschritt anzeigt, möchte ich den Hintergrund der gesamten tr, wie es der% Abschluss des Berechnungsprozesses entspricht schattieren.

Zum Beispiel:

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] 

Nur Hintergrund:

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] 

Was empfehlen Sie?

Hier einige allgemeine 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> 

Answer 1

Für meine Lösung Sie eine zusätzliche div in der ersten td jedes tr brauchen aber es sieht ziemlich cool. muss noch einige Verbesserungen, aber Sie bekommen die Idee ...

DEMOhttp://jsfiddle.net/CBJjv/2/

Rufen Sie diese Funktion nach data-progress Werte zu aktualisieren.

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'; 
    } 
} 

Statt mit der Position zu spielen, können Sie auch eine feste Position haben könnten und die Breite der div

Arbeiten in Chrome, nicht in anderen Browsern getestet ändern.

Answer 2

Ich stimme zu, dass ein Hintergrundbild auf dem tr ist der Weg zu gehen. Allerdings müssen Sie die Anzeige des tr ändern, und Hintergrund Prozentsätze funktionieren nicht so, wie Sie erwarten. Vermeiden Sie% in Ihrer Hintergrundbildposition und verwenden Sie einfach px. Sie können die Breite Ihrer Tabelle berechnen, Ihren Prozentsatz nehmen und zu px konvertieren.

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

Answer 3

Falls jemand noch für eine elegante Lösung suchen, können Sie Ihre tr stylen. Für einen Fortschrittsbalken von 40%, würde ich verwenden:

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

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