如何顯示進度條作爲表格行背景？

我有一個表是這樣的：如何顯示進度條作爲表格行背景？

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

新表中的行與一個形式加入上述運行後臺進程來計算每個td所有數據。該過程可能需要10-60秒。

而不是顯示進度的單獨列，我想爲整個tr填充背景，因爲它對應於計算過程的完成百分比。

例如：

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]

僅限於背景：

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]

你有什麼建議？

以下是一些通用的標記：

<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>

來源

2013-09-01 Ryan

在普通的JavaScript？ –

我假設JS和CSS。我不知道如何解決這個問題。我只知道最終我希望行本身能夠傳達進度，而不是單獨的進度部分。 – Ryan

嘿，關閉和降薪的選票是什麼？至少提出一個建議。 – Ryan

對於我的解決方案，你需要一個額外的div每個tr的第一td但它看起來很酷。還需要一些改進，但你的想法...

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

呼叫更新data-progress值後此功能。

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

，而不是與位置打，你也可以有一個固定的位置，並修改div

作品的寬度在Chrome中，而不是在其他瀏覽器進行測試。

來源

2013-09-01 12:56:29

頂尖作品佩德羅！謝謝。我在Chrome，Firefox和Safari中測試了它 - 都在某種程度上有效。 Safari是波濤洶涌，沒有過渡。 Firefox也不會尊重'overflow：hidden'，即使在'tr'也是如此。這是我的測試更新：http://jsfiddle.net/CBJjv/3/再次感謝。溢出隱藏的東西是關於。我會研究它。 – Ryan

然後播放寬度:)也許在safari中，您可以使用webkit-前綴進行轉換 –

我同意在tr上放置一個背景圖像是一條路。但是，您需要更改tr的顯示，並且背景百分比不符合您的預期。避免在你的背景圖像位置使用％，並使用px。你可以計算你的表格的寬度，把你的百分比和轉換爲px。

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

來源

2013-09-01 13:35:42

在任何人的情況下仍然在尋找一個完美的解決方案，你可以風格你tr。爲40％的進度條，我會使用：

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

實施例：https://codepen.io/drspa44/pen/rYEzWj

來源

2017-12-07 21:31:44 drspa44

如何顯示進度條作爲表格行背景？

回答

相關問題