0

あなたが私を助けてくれることを願っています。MVCを使用して動的にテーブルを構築しています。状況に応じて、テーブルの行と列の数は異なります。各行は、私が測定しようとしている品質パラメータ（たとえば、水分、タンパク質など）を表しています。最初の2列には、品質パラメータの名前と、値をキャプチャするための入力テキストボックスが含まれています。その後、追加の各列には、検証しようとしている製品が含まれています。それらの列の中に、検証しようとしている属性minValueとmaxValueを含むを配置しました。

各行の基本的なロジックは次のとおりです...

if（Text Box Value> = minValue && Text Box Value <= maxValue）、set div class "tick" else set divclass"cross"。

私のCSSは、検証に応じて、ティックまたはクロスの画像を表示します...

私のJQueryスキルはかなり貧弱です。次のことをする必要があることはわかっていますが、方法がわかりません。

  1. すべての入力テキストフィールドに変更イベントを配置します。
  2. 値が変更されたら、同じtrブロック内のすべてのdivをループして、テキストボックスフィールドに対してminValue/maxValueを検証します。
  3. 検証に応じて、divのクラスをティック/クロスに設定します。

これがHTMLの例です...

<table class="dataTable">
    <thead>
        <tr>
            <th>Parameter</th>
            <th>Value</th>
                <th>APH1</th>
                <th>APH2</th>
        </tr>
    </thead>         
    <tr>
        <td>    
            Protien
        </td>
        <td>
            <input class="text-box single-line" id="AnalyseQualityParameters_0__Value" name="AnalyseQualityParameters[0].Value" type="text" value="13.00" />
        </td>
        <td><div class="cross" minvalue="14.00" maxvalue="100.00">&nbsp;</div></td>
        <td><div class="tick" minvalue="13.00" maxvalue="100.00">&nbsp;</div></td>
    </tr>
    <tr>
        <td>    
            Moisture
        </td>
        <td>
            <input class="text-box single-line" id="AnalyseQualityParameters_1__Value" name="AnalyseQualityParameters[1].Value" type="text" value="44.00" />
        </td>
        <td><div class="cross" minvalue="0.00" maxvalue="12.50">&nbsp;</div></td>
        <td><div class="cross" minvalue="0.00" maxvalue="12.50">&nbsp;</div></td>
    </tr>
</table>

誰かが私が始めるのを手伝ってくれるなら、私は本当にそれをいただければ幸いです。

よろしくお願いします！

4

1 に答える 1

1

私は以下があなたが必要とすることをすることを信じます

$('.text-box.single-line').change(function(){
    /* get value of current input*/
    var val=$(this).val();
    /* loop over the cross elements in same row, "this" is the current input */
     $(this).closest('tr').find('.cross').each(function(){
        /* "this" is the current cross element*/
            var min= 1 * $(this).attr('minvalue');
            var max= 1 * $(this).attr('maxvalue');

            var thisClass= ( val >= min && val <= max ) ?'tick' : 'cross';
            /* remove prior class and add new one*/
            $(this).removeClass('tick cross').addClass( thisClass);

     })
})
于 2012-11-17T00:55:03.703 に答える