0

我希望你能帮助我。我正在使用 MVC 动态构建一个表。根据情况，表格将有不同的行数和列数。每行代表我要测量的质量参数（例如，水分、蛋白质...等）。前两列包含质量参数的名称和用于捕获值的输入文本框。之后，每个附加列都包含我要验证的产品。在这些列中，我放置了一个包含属性 minValue 和 maxValue 的属性，这些属性是我要验证的。

每行的基本逻辑是这样的......

如果（文本框值 >= minValue && 文本框值 <= maxValue），设置 div 类“tick”，否则设置 div 类“cross”。

然后，我的 CSS 将根据验证显示 Tick 或 Cross 的图像......

我的 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 回答