Question

我正在尝试验证表格中的输入。

我有一个包含行和输入的表格。如果某些输入不为空，我们需要检查相邻输入是否有值，如果不是则返回false。如果两者都是空的。

我做了一个关于我想做什么的小演示。 https://jsfiddle.net/51bz8ggv/2/

$(document).ready(function() {

  $("table tr :input").each(function () {
      console.log(this.value);
      // some check here
  });

});

感谢。

Answer 1

试试这段代码：

 $(document).ready(function() {

  $(".date").each(function () {
      var $that = $(this);
      var $currentRow = $that.parents("tr");
      var $points = $currentRow.find(".points");
      console.log($that.val() )
      console.log($points.val() )
      var $currentROw = $currentRow.find("td:last-child").text(($that.val() == "" && $points.val() == "") || ($that.val() != "" && $points.val() != ""));
  });
});

https://jsfiddle.net/oa42nzr0/

Answer 2

迭代// get all tr except the first and iterate over them $("table tr:nth-child(n+2)").each(function() { // get all input fields within it var $inp = $(':input', this); // filter out all empty input fields var $fil = $inp.filter(function() { return $(this).val().trim() == ''; }); // now check all are non-empty or all are empty console.log($fil.length == 0 || $fil.length == $inp.length); });并将总输入元素与空输入字段数进行比较。

$("table tr:nth-child(n+2)").each(function() {
  var $inp = $(':input', this);
  var $fil = $inp.filter(function() {
    return $(this).val().trim() == '';
  });
  console.log($fil.length == 0 || $fil.length == $inp.length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border="1">
  <tr>
    <th>Date</th>
    <th>Points</th>
    <th>Result</th>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" value="2016-09-02" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" />
    </td>
    <td>false(error)</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" value="679" />
    </td>
    <td>false(error)</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" value="2016-09-02" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" value="679" />
    </td>
    <td>true</td>
  </tr>
  <tr>
    <td>
      <input type="text" name="date[]" class="date" />
    </td>
    <td>
      <input type="text" name="points[]" class="points" />
    </td>
    <td>true</td>
  </tr>
</table>

if

Answer 3

https://jsfiddle.net/51bz8ggv/3/

$(document).ready(function() {
    $("table td:nth-child(1) :input").each(function(index) {

        var rowDate = $(this).val()
        var rowPoints = $("table td:nth-child(2) :input").eq(index).val()

        if (rowDate === "" && rowPoints === "") {
            //both are empty
            console.log(index + " : true")
        } else if (rowDate !== "" && rowPoints !== "") {
            //both have values
            console.log(index + " : true")
        } else {
            //one is empty and the other have value
            console.log(index + " : false")
        }
    });
});

我正在使用nth-child(1)循环遍历第一个列，而不是将值与nth-child(2)中的输入（即第二列）进行比较。因此，如果您使用不同的表格，请务必调整这些数字以适合您要比较的列

Answer 4

这可能会有所帮助。

$(document).ready(function() {
  $("table tr").each(function () {
        $inputarray = $(this).find("input");
      $length = $inputarray.size();
      if($length>0){
      $i = 0;
        $inputarray.each(function() {
          if(this.value!=="") {
            $i++;
          }
        });
        if($i===0 || $i===$length){
            $(this).find( "td:last" ).text("true");
        } else {
            $(this).find( "td:last" ).text("false");
        }
      }    
  });
});

您更新的Fiddle

jQuery验证表格单元格中的输入字段

4 个答案: