How to iterate through tr class ,get value and do the conditions?-CodePudding

I have following table: All the data here are dynamic, loaded from database.

<table>
   <tr >
       <td>Name: <input type="text"  value="Steven"></td>
       <td>Employed: <input type="text"  value="Y"></td>
       <td>Minimum Salary: <input type="text"  value="200"></td>
       <td>Location: <input type="text"  value="USA"></td> 
   </tr>
   <tr >
       <td>Name: <input type="text"  value="John"></td>
       <td>Employed: <input type="text"  value="N"></td>
       <td>Minimum Salary: <input type="text"  value="0"></td>
       <td>Location: <input type="text"  value="USA"></td> 
   </tr>
   <tr >
       <td>Name: <input type="text"  value="Mark"></td>
       <td>Employed: <input type="text"  value="Y"></td>
       <td>Minimum Salary: <input type="text"  value="200"></td>
       <td>Location: <input type="text"  value="USA"></td> 
   </tr>
</table>
<button id="btn_add">Add More</button> //will create new tr with inputs
<button id="btn_save">Save</button>

$('.items').each(function(){
       $emp_stat= $(this).find($('.emp_stat').text());
        $min_sal = $(this).find($('.min_sal').val());
        if($emp_stat == 'Y' && $min_sal < 100){
            alert('Min Salary must be above 100 $.');
        }else{
            //else do something
        }
});

What I want to do here is ; In all Employed Value = Y, say the Minimum salary must be 100 . If some one puts below hundred 100 want to give some sort of validation popup if clicked on save btn and for Employed Value = N, I want to disable minimum Salary inputs. How to do it? This is on edit/new page. on btn_add will add new with inputs with same condition.

How to do in Jquery?

CodePudding user response：

I thing your selector is wrong.

$(this).find('.emp_stat').val()

$(this).find('.min_sal').val()

this returns the correct values.

CodePudding user response：

Consider the following.

$(function() {
  function checkSalary(row, salary) {
    // Given a Row element, check if 2nd Input is "Y" and then check if Salary is less than given Salary or 100
    if (salary == undefined) {
      salary = 100;
    }
    var result = false;
    if ($("td:eq(1) input", row).val() == "Y") {
      result = parseInt($("td:eq(2) input", row).val()) < 100;
    }
    // If less than 100, result will be false
    return result;
  }

  function checkAll(className) {
    // Assume all are correct
    var result = true;
    // Check Each Row, by given class name
    $(className).each(function(index, element) {
      var check = checkSalary(element);
      if (!check) {
        $(element).removeClass("alert");
      } else {
        $(element).addClass("alert");
      }
      // Combined verification
      // true && true = true
      // true && false = false
      result = result && check;
    });
    return result;
  }

  $("#btn_save").click(function(event) {
    event.preventDefault();
    return checkAll(".items");
  });
});

.alert td:nth-child(3) input {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr >
    <td>Name: <input type="text" value="Steven"></td>
    <td>Employed: <input type="text" value="Y"></td>
    <td>Minimum Salary: <input type="text" value="200"></td>
    <td>Location: <input type="text" value="USA"></td>
  </tr>
  <tr >
    <td>Name: <input type="text" value="John"></td>
    <td>Employed: <input type="text" value="N"></td>
    <td>Minimum Salary: <input type="text" value="0"></td>
    <td>Location: <input type="text" value="USA"></td>
  </tr>
  <tr >
    <td>Name: <input type="text" value="Mark"></td>
    <td>Employed: <input type="text" value="Y"></td>
    <td>Minimum Salary: <input type="text" value="200"></td>
    <td>Location: <input type="text" value="USA"></td>
  </tr>
</table>
<button id="btn_add">Add More</button>
<button id="btn_save">Save</button>

This is an example of a simple form verification method. It uses .each() to iterate each of the rows in a table. You have a specific condition, if Employed is "Y", then check the Salary is high enough.