我如何等到第一列中的所有表行都为100，才能在第二列中显示“完成”

Question

I have a table which the number of row is dynamic depends on database record. So regardless of the no of table row, when all the rows in the first column is 100, all rows in the 2nd column will display "done".

Right now, when i input 100 in the 1st row, all rows in the 2nd column will display "done". How can i wait until all rows in the 1st column is 100 to display "done"

 $(".test").on('keyup', function() { var set = $('.test').val(); if (set == 100 ) { $('.result').val("done"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <table> <tr> <td><input type="number" class="test"> <td><input type="text" class="result"> </tr> <tr> <td><input type="number" class="test"> <td><input type="text" class="result"> </tr> <tr> <td><input type="number" class="test"> <td><input type="text" class="result"> </tr> 

Answer 1

Here is one-of-the-ways to achieve it. Instead of keyup , you use input event.

On every event, you check if all input fields have values or not.

If all fields have values, check if all have values as 100 or not.

 $(".test").on('input', function() { checkAndUpdateSecondColumn(); }); function checkAndUpdateSecondColumn() { var empty = $("input.test").filter(function() { return this.value != ""; }); if ($("input.test").length == empty.length) { var sum = $('.test').toArray().reduce(function(sum, element) { return sum + Number(element.value); }, 0); $('.result').val(''); if (sum == $("input.test").length * 100) { $('.result').val('done'); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <table> <tr> <td><input type="number" class="test"> <td><input type="text" class="result"> </tr> <tr> <td><input type="number" class="test"> <td><input type="text" class="result"> </tr> <tr> <td><input type="number" class="test"> <td><input type="text" class="result"> </tr> 

Answer 2

The problem with your code is that when you assign your variable set , you are attempting to read the .val() of a jQuery collection containing multiple DOM elements. The value of the first matching element is returned; the others are not evaluated.

It sounds like what you want to do is evaluate the entire set and make certain that all match your desired value before displaying a "done" message. One way to achieve this behavior is by filtering against the values of every element in the jQuery collection (every element of class "test" ).

var testInputs = $('.test');
var desiredValue = 100;

testInputs.on('keyup', function() {
    var testInputsSetToDesiredValue = testInputs.filter(function() {
        return parseInt(this.value, 10) === desiredValue;
    });
    if (testInputsSetToDesiredValue.length === testInputs.length) {
        $('.result').val('done');
    }
});