0

MVC ビューで作成されたテーブルの一部:

テーブル

その背後にある HTML の一部:

...
<tr>
    <td>
        <div id="implG13">252,849.00</div>
    </td>
    <td>
        <div id="progressBarG13"></div></td>
    <td>
        <div id="unimplG13">234,687.00</div>
    </td>
</tr>

<tr>
    <td>
        <div id="implG19">239,773.00</div>
    </td>
    <td>
        <div id="progressBarG19"></div></td>
    <td>
        <div id="unimplG19">174,397.00</div>
    </td>
</tr>
...

Progress Barこれら 2 つの列の間の表の各行に、実装された「コスト削減」のパーセンテージをグラフィカルに表すを表示できるようにしたいと考えています。

つまり、最初の行の場合、JQuery は次のようになります。

function CalculatePercentage(){
    return ($("#implG13").val() / ($("#implG13").val() + $("#unimplG13").val()));
}

$("#progressbarG13").progressbar({
    $value : CalculatePercentage()
});

問題は、テーブルの行数が可変であることです。プログラムで一意の ID を割り当てて、「実装されたコスト削減値」、「実装されていないコスト削減値」、および各行の進行状況バーを参照できます。

C# の名前付きパラメーターのような、これらの ID を明示的に参照する新しい関数を作成する必要がないように、JQuery でこれを実装するにはどうすればよいですか?

これは私の初めての JQuery でのプログラミングです (JQuery は JavaScript ライブラリか何かですか?) ので、私の素朴さを許してください!

4

2 に答える 2

1

そんな感じ

HTML マークアップ

<tr>
    <td>
        <div class="impl" id="implG13">252,849.00</div>
    </td>
    <td>
        <div class="bar" id="progressBarG13"></div>
    </td>
    <td>
        <div class="unimpl" id="unimplG13">234,687.00</div>
    </td>
</tr>

Javascript (jquery あり)

$("tr").each(function(){
    var $tr = $(this);
    var impl = $tr.find(".impl").val();
    var unimpl = $tr.find(".unimpl").val();
    $tr.find(".bar").progressbar({
        $value : impl/(impl+unimpl)
    });
});
于 2013-07-29T15:07:45.040 に答える
0

jQuery では、より複雑なセレクターを使用できます。たとえば、接頭辞セレクターなどです。

$('[id^="progressbar"]').each(function() {
    var currentId = $(this).attr('id');
    var index = currentId.replace("progressbar",""); // This removes progressbar from the ID so you get the unique identifier
    var percentage = calculatePercentage(index);
    // Do something with percentage to display it somewhere.
});

function calculatePercentage(index) {
     return ($("#impl"+index).val() / ($("#impl"+index).val() + $("#unimpl"+index).val()));
}

Bootstrap Progress Barsを見て、比較的簡単に実装できるものを見つけることができます。

幸運を！

于 2013-07-29T15:07:33.433 に答える