表内の水平バーまたは機能のような進行バー

テーブル（IE Row 0、列2）内の特定のセル内に水平棒グラフ/進捗バーを持つ方法を考える人はいますか？表内の水平バーまたは機能のような進行バー

だから、実際にはテキスト8088874は、視覚的な方法での割合を示す背景色を持っているでしょう。

マイセットアップがテーブルがdatatables.net

出典

2011-12-05 EKS

テーブルのHTMLを生成するために 'Repeater'や' ListView'のようなコントロールを使用していますか？ –

datatables.netで完了していない – EKS

HTML5を偶然に使用している場合は、 'meter'タグを調べる必要があります。それに対するサポートは、今は非常に、非常に低いですが、それについて学ぶ価値があります。 –

divを作成して、必要な高さにします。その背景色をあなたが望む色、例えば赤色に設定します。

<div style="background-color:red;height:20px;width:100px"></div> 100% 
<div style="background-color:red;height:20px;width:75px"></div> 75% 
<div style="background-color:red;height:20px;width:50px"></div> 50% 
<div style="background-color:red;height:20px;width:25px"></div> 25% 
<div style="background-color:red;height:20px;width:1px"></div> 1%

が明らかに任意の一般的なCSSスタイルシートに移動することができますが、それはあなたのレイアウトに合わせ持つように離れて微調整することができ&：それは100％の例であれば、それがどうなるかの画分に幅を設定します。

出典

2011-12-05 16:34:02

私はそれを自分で考えていなかったので、簡単な答えが得られました。ありがとう – EKS

によって供給されているATM ASP.NETで私はjQueryを使ってあまり慣れていないんだけど、私はあなたのために非常に簡単にこれを実行しますプログレスバーの機能があると考えています。これはdatatables.netテーブル内で使用できませんか？

あなたはこれらの表に単純なHTMLを含めることが許可されている場合は、あなたがあなたのセル内（変更と私自身のコードからコピーされた）このような何かを試みることができる：

<div id="processingProgBar" style="width:200px; height:14px; position:relative;"> 
    <img src="imgs/dot_blue.png" id="processingDotBlue" style="position:absolute; height:14px; width:25px; top:0px; left:0px; border:0px; z-index:1;"> 
    <img src="imgs/dot_black.png" id="processingDotBlack" style="position:absolute; height:14px; width:175px; top:0px; left:25px; border:0px; z-index:2;"> 
    <div style="color:##ffffff; position:absolute; height:14px; width:200px; top:0px; left:0px; z-index:4; text-align:center;"> 
     <span id="processingProgBarT" class="normal" style="color:##ffffff;">5</span>/40 Images Processed 
    </div> 
</div>

これはその静的なプログレスバーを設定しますJSによって変更することができます。進捗が行われるたびに、「processingProgramBarT」要素のinnerHTMLを更新し、「processingDotBlue」要素の幅を更新してから、「processingDotBlack」要素の幅と左端を更新します。

parent.document.getElementById('processingProgBarT').innerHTML = '6'; 
parent.document.getElementById('processingDotBlue').style.width = '30px'; 
parent.document.getElementById('processingDotBlack').style.width = '170px'; 
parent.document.getElementById('processingDotBlack').style.left = '30px';

このコードでは、私の例では処理中の6番目の画像のプログレスバーが更新されます。

これは関数に簡単に書き込むことができますが、必要はありませんでした。あなたのアプリケーションはページ上に複数のIDを必要とするようですが、IDの末尾にユニークな識別子（例： "Row1"、 "Row2"など）を付けるだけで、

こちらがお役に立てば幸いです。

出典

2011-12-05 15:39:12 Nicholas

htmlだけでプログレスバーを簡単に作成できます。あなたは、あなたが望む外観に応じて絶対的な配置を使用する必要があるかもしれません。あなたはまた、プラグインjQueryのスパークラインに興味があるかもしれない、より高度なカスタマイズのために

http://blog.pathtosharepoint.com/?s=progress

：私のブログ上

例は、SharePointのためですが、彼らはあなたに何ができるかのアイデアを与えることができます：

http://www.omnipotent.net/jquery.sparkline/

編集：私は達成するためのプログレッシブ・エンハンスメントを使用することを言及している必要がありますその結果、スクリプトはテーブルの内容を読み込み、それをチャートに変換します。これはDataTableで動作するはずです。あなたはjQueryの（またはプラグイン）を使用したくない場合は、常に計算することにより、それが安っぽい行うことができます

http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/

http://blog.pathtosharepoint.com/2009/11/25/sparklines-more-information-in-less-space/

出典

2011-12-05 16:08:33 Christophe

：はまた、ここに私のブログには、2つの以上の特定のリンクですあなたの計算に基づいてテーブルセルの幅=％を設定するDIVを描画します。

javascriptではなくASP.NETに関連したいものがありますか？

出典

2011-12-05 16:12:49