如何将进度条显示为表格行背景？

Posted 2023-03-05

【中文标题】如何将进度条显示为表格行背景？

【英文标题】：How can I display progress bar as table row background?

【发布时间】：2013-09-04 16:44:44

【问题描述】：

我有一张这样的桌子：

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>

【问题讨论】：

我假设 JS 和 CSS。我还不确定如何解决这个问题。我只知道最终我希望行本身传达进度，而不是单独的进度部分。

嘿，关闭投票和否决票是怎么回事？至少提个建议。

【参考方案1】：

如果有人仍在寻找优雅的解决方案，您可以为您的tr 设置样式。对于 40% 的进度条，我会使用：

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

示例：https://codepen.io/drspa44/pen/rYEzWj

【讨论】：

这真是太棒了。感谢分享。

在 Safari 14.X 中不起作用。它对每个 td 重复。

【参考方案2】：

对于我的解决方案，您需要在每个 td 的第一个 td 中添加一个额外的 div，但它看起来很酷。仍然需要一些改进，但你明白了......

演示 http://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，未在其他浏览器中测试。

【讨论】：

一流的工作佩德罗！谢谢。我在 Chrome、Firefox 和 Safari 中对其进行了测试——所有这些都在一定程度上起作用。 Safari 很不稳定，没有过渡。并且 Firefox 不会尊重overflow:hidden，即使在tr 上也是如此。这是我的测试更新：jsfiddle.net/CBJjv/3 再次感谢。溢出隐藏的东西令人担忧。我会调查的。

然后玩宽度 :) 也许在 Safari 中你可以使用 webkit- 前缀进行转换

节省时间 :) 喜欢这个主意，谢谢

【参考方案3】：

我同意在 tr 上放置背景图像是可行的方法。但是，您需要更改 tr 的显示，并且背景百分比不会按您预期的方式工作。避免在背景图像位置使用 %，而只使用 px。您可以计算表格的宽度，取百分比并转换为 px。

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