使用jquery验证表行

时间:2018-02-24 13:42:53

标签: javascript jquery validation

我正在尝试使用仅接受1和0的输入验证矩阵表。 我想验证每一行。如何在按钮单击时确定每行td的值?

修改 感谢@ Abhilash Ravindran C K我更新了我的javascript代码。现在我想获取这些值并在条件下使用它们。



 $('#checkMatrix').click(function(e){
       $("tr").find("td input").each(function() {
            document.write(this.value);
                        
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Matrix">
<tr id="Matr1">
  <td>1</td>
  <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input class="increment-30-gray"  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>

   </tr>
<tr id="Matr2">
  <td>2</td>
  <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input class="increment-30-gray"  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>
 <td><input  type="number"  min="0" max="1" step="1"></td>

</tr>
</table>

<button id="checkMatrix">Check</button>
<h4>Answers:<br> 1,0,0,1<br>0,0,1,0</h4>
&#13;
&#13;
&#13;

  答案:
第1行:1,0,0,1第2行:0,0,1,0

2 个答案:

答案 0 :(得分:2)

以下代码可帮助您迭代每个<td>的每个<tr>

$('#checkMatrix').click(function(e){
       $("tr").find("td input").each(function() {
            console.log(this.value);
            // Here you can write the logic for validation              
       });
});

此代码适用于您,

$('#checkMatrix').click(function(e){
     var $first = $('#Matr1 td');
     var $second = $('#Matr2 td');
     if(( $first.eq(1).find('input').val() == 1 && $first.eq(2).find('input').val() == 0 && $first.eq(3).find('input').val() == 0 && $first.eq(4).find('input').val() == 1) && ( $second.eq(1).find('input').val() == 0 && $second.eq(2).find('input').val() == 0 && $second.eq(3).find('input').val() == 1 && $second.eq(4).find('input').val() == 0))
     {
         alert('success');            
     }
     else
     {
         alert('failed');
     }                          
});

答案 1 :(得分:1)

您还可以1输入每行的数组,然后重复第2行的过程,等等:

然后我们使用push方法将数组的元素连接成一个字符串,并返回要比较的字符串。 see more关于加入方法。

建议避免在JS中保留答案,因为客户很容易看到它。在Php中保存答案。然后,您可以从PHP返回变量并在JS中进行比较。

&#13;
&#13;
join()
&#13;
 

      $('#checkMatrix').click(function(e){
    var a = []; var b = [];
       $("#Matr1").find("td input").each(function() {
       var z = $(this).val();
    //if user inputs are 1 or 0 push them into the array
        if(z === "1" || z === "0"){ a.push(this.value);}                         
    });
      $("#Matr2").find("td input").each(function() {
      var z = $(this).val();
    //if user inputs are 1 or 0 push them into the array
        if(z === "1" || z === "0"){ b.push(this.value);}                         
    });
  var ArrToString1 =a.join(""); //row 1 array into  string
  var ArrToString2 =b.join(""); //row 2 array into string
    if (ArrToString1 === "1001")console.log("row 1 correct");
    if (ArrToString2 === "0010")console.log("row 2 correct");
    });
&#13;
&#13;
&#13;