8

次のようなテーブルがあります。

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

3 に答える 3

12

td私のソリューションでは、それぞれの最初に追加の div が必要ですが、trかなりクールに見えます。まだいくつかの改善が必要ですが、アイデアはわかります...

デモ 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 で動作しますが、他のブラウザではテストされていません。

于 2013-09-01T12:56:29.800 に答える