使用jquery验证表行

Question

我试图验证矩阵表的输入只接受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>

Answers:
Row1: 1,0,0,1
Row2: 0,0,1,0

Answer 1

以下代码将帮助您迭代每个<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');
     }                          
});

Answer 2

您还可以将push输入到每行的数组中，然后重复第2行的过程，等等：

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

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

 

      $('#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");
    });

<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>