我有一个这样的表:
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>
最佳答案
对于我的解决方案,您需要在每个 tr
的第一个 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,未在其他浏览器中测试。
关于javascript - 如何将进度条显示为表格行背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18558564/