Question

我每行有3个文本框。至少其中一行应完全填充。任何行中的所有文本框都不应为空。我已经尝试过以下代码，仅用于第一行。

<p class="pinim-pc-bar incomplete"><span class="pinim-pc-bar-fill" style="width:80%"><span class="pinim-pc-bar-fill-color pinim-pc-bar-fill-yellow"></span><span class="pinim-pc-bar-fill-color pinim-pc-bar-fill-red" style="opacity:0.2"></span><span class="pinim-pc-bar-text">8/10<i class="fa fa-refresh" aria-hidden="true"></i></span></span></p>

我们要获得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，因此不会获得预期的输出。

您必须对row中的每个form（tr）进行迭代，然后才能找到文本字段的值不为空，并通过比较之前的maxCount计数将其存储在tr变量中。

以下是有效的代码段：

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

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

2 个答案: