Question

I hope you can help me. I am building a table dynamically using MVC. Depending on the situation the table will have different number of rows and columns. Each row represents a Quality Parameter that I am trying to measure (eg, Moisture, Protein…etc). The first two columns contain the name of the Quality Parameter and the Input Text Box for capturing the value. After that each additional column contains a product which I am trying to validate against. Within those columns i have placed a that contains attributes minValue and maxValue which are what I am trying to validate against.

The basic logic for each row is this…

if (Text Box Value >= minValue && Text Box Value <= maxValue), set div class “tick” else set div class “cross”.

My CSS then will display either an image of a Tick or a Cross depending on the validation…

My JQuery skills are pretty poor. I know I need to do the following, but i am not sure how….

1. Put a change event on all my input text fields.
2. When a value changes, loop through all div in the same tr block and validate the minValue/maxValue against the text box field.
3. Set the class of the div to either tick/cross depending on the validation.

Here is an example of the 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>    

If anyone could help me get started I would really appreciate it.

Thanks in advanced!

Answer 1

I believe the following does what you need

$('.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);

     })
})