Question

如何计算<td>中具有非空文本框的表行数？

我尝试了类似下面的内容，但它计算了所有行。

$("#sample_table input[value!=\"\"]").closest("tr",$(this)).length;

Answer 1

您可以使用.filter()获取tr元素。

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

代码的

var trElements = $("#sample_table tr").filter(function(){
    //Get Non Empty inputs
    var nonEmptyInputs = $(this).find('input[type="text"]').filter(function(){
        return this.value.length > 0; 
    });

    return nonEmptyInputs.length > 0
});

var noOfNonEmptyTrs = trElements.length;

$(document).ready(function() {
  $('button').click(function() {
    var trElements = $("#sample_table tr").filter(function() {
      //Get Non Empty inputs
      var nonEmptyInputs = $(this).find('input[type="text"]').filter(function() {
        return this.value.length > 0;
      });
      return nonEmptyInputs.length;
    });

    console.log(trElements.length);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button">GET COUNT</button>
<table id="sample_table">
  <tbody>
    <tr>
      <td>
        <input type="text" value="">
      </td>
      <td>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="">
      </td>
      <td>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="">
      </td>
      <td>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="">
      </td>
      <td>
        <input type="text" value="">
      </td>
    </tr>

  </tbody>
</table>

Answer 2

试试这个：

function countNotEmptyRows() {
  var notEmptyRows = $('tr').filter(function(idx, element) {
    return $(element).find('td input').val() != '';
  });

  return notEmptyRows.length;
}

$(document).ready(function() {
  alert(countNotEmptyRows())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text" value="not empty">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" value="">
      </td>
    </tr>

  </tbody>
</table>

Answer 3

试试这个

对于非空输入的数量 -

  var count = $('#sample_table tr td input').filter(function(){
       return $(this).val();
    }).length;

对于具有非空文本框的行数 -

var count = $('#sample_table tr').filter(function(){
      return $(this).find('input').filter(function(){
        return $(this).val();
             }).length > 0;

    }).length;

这是更新的示例： https://jsfiddle.net/39jcjobv/4/

count具有非空文本框的表行

3 个答案: