如何檢查是否使用jQuery填充了一行中的所有文本框

Question

每行有3個文本框。 至少其中一行應完全填充。 任何行中的所有文本框都不應為空。 我試過下面的代碼，它僅用於第一行。

var filledtextboxes= $(".setup_series_form tr:first input:text").filter(function () {
  return $.trim($(this).val()) != '';
}).length;

我們希望在任何行TIA中獲得最大數量的非空文本框。

Answer 1

遍歷所有行。 在每一行中，獲取已填充的框數。 如果這大於先前的最大值，則用此計數替換最大值。

var maxboxes = -1;
var maxrow;
$(".setup_series_form tr").each(function(i) {
    var filledtextboxes = $(this).find("input:text").filter(function () {
      return $.trim($(this).val()) != '';
    }).length;
    if (filledtextboxes > maxboxes) {
        maxboxes = filledtextboxes;
        maxrow = i;
    }
});

Answer 2

您只將$(".setup_series_form tr:first input:text")這里的第一個tr作為目標，因此您將無法獲得預期的輸出。

您必須遍歷form每一row （tr），然后查找不具有空值的文本字段的計數，並通過比較先前的tr計數將其存儲在maxCount變量中。

這是一個工作片段：

 $(document).ready(function() { var maxCountInRow =0; var rowNumber; $(".setup_series_form tr").each(function(index){ var filledtextboxes= $(this).find("input:text").filter(function () { return $.trim($(this).val()) != ''; }).length; if(filledtextboxes>maxCountInRow){ maxCountInRow=filledtextboxes; rowNumber=index; } }); console.log("Row Number:"+rowNumber+" having maxCount: "+maxCountInRow); }); 

 .registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;} .registrant_table tr td{border: 1px solid #ccc;height: 42px;font-weight: bolder;} .registrant_table input{border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;} label.error{color: red !important;} .err-fields{background-color:red;color: white !important;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="setup_series_form"> <div> <table class="registrant_table"> <tr class="title"> <td>No</td> <td>Official Full Name</td> <td>Mobile Contact</td> <td>Email</td> </tr> <tr class="in-fields"> <td>1</td> <td><input type="text" value="sas" name="firstname[]"></td> <td><input type="text" value="" name="phone[]"></td> <td><input type="text" value="" name="email[]"></td> </tr> <tr class="in-fields"> <td>2</td> <td><input type="text" value="sas" name="firstname[]"></td> <td><input type="text" value="sas" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> <tr class="in-fields"> <td>3</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> </table> </div> </form>