jquery - 如何使用 jQuery 确定表行内的文本框是否为空？

Question

我有以下功能:

 var emptyFields = false;

 function checkNotEmpty(tblName, columns, className){

    emptyFields = false;

     $("."+className+"").each(function() {
          if($.trim($(this).val()) === "" && $(this).is(":visible")){
             emptyFields = true;
             return false; // break out of the each-loop
          }
     });

      if (emptyFields) {
             alert("Please fill in current row before adding a new one.")
       } else {
              AddRow_OnButtonClick(tblName,columns);
       }
}

在添加新行之前检查表中的所有元素是否为空，我只需要检查表的最后一行是否至少有一个不为空的元素，而不是整个表。

className 应用于表。请注意，我的问题是检查最后一行，并且该行中只有一个元素必须包含一些文本。 (例如，每行有 5 个文本框，至少有一个文本框需要在内部包含一些文本，以便能够添加另一行，否则会出现警报)。

Answer 1

这应该有效:

if ($('.' + className + ' tr:last input:text:visible[value]').length > 0) {
    AddRow_OnButtonClick(tblName,columns);
} 
else {
    alert("Please fill in current row before adding a new one.")
}

这当然假设您正在使用的 className 用于 table 元素。

工作示例:

<script type="text/javascript">
$(function(){
    $('#btn').click(function(){
        if ($('.test tr:last input:text:visible[value]').length > 0) {
            alert('SUCCESS - at least 1 value is filled in!');
        } 
        else {
            alert("FAIL - all textboxes on last row are empty.")
        }
    });
});
</script>

<table class="test" border="1">
<tr>
<td><input type="text" value="filled" /></td>
<td><input type="text" value="in" /></td>
</tr>
<tr>
<td><input type="text" value="" /></td>
<td><input type="text" value="" /></td>
</tr>
</table>

<input id="btn" type="button" value="Click Me!" />