javascript - 如何计算一列有多少个单元格不同为空或空

Question

我有一个包含不同列的 html 表，我想检查一列中有多少个单元格我想要一些东西（！= null 或！=“”），我尝试了不同的东西，但没有任何效果

表代码：

<table width="49%" border="1" align="left" cellspacing="0" id="table_left">
    <tr id="left_tittle">
        <td width="25%"><strong>Animal</strong>
        </td>
        <td width="25%"><strong>Hierro</strong>
        </td>
        <td width="35%"><strong>Clasificación</strong>
        </td>
        <td width="15%"><strong>Peso</strong>
        </td>
    </tr>
    <tr>
        <td>
            <label for="textfield"></label> <span id="oAnimal">
        <input name="anml" type="text" id="anml1" class="col1"
        required oninvalid="this.setCustomValidity('Por favor entre el codigo del animal')"
        style="width:96%" align="center"/>
      <span class="textfieldRequiredMsg">Por favor entre el codigo del animal</span></span>
        </td>
        <td>
            <label for="hierro"></label> <span id="oHierro">
        <input name="hierro3" type="text" id="hierro1" 
        required oninvalid="this.setCustomValidity('Por favor entre el hierro del animal')"
        style="width:96%" align="center" />
      <span class="textfieldRequiredMsg">Por favor entre el hierro del animal</span></span>
        </td>
        <td>
            <label for="clasificacion"></label> <span id="oCls">
        <input name="clsf" type="text" id="clsf1" 
        required oninvalid="this.setCustomValidity('Por favor entre la clasificacion del animal')"
        style="width:96%" align="center" />
      <span class="textfieldRequiredMsg">Por favor entre la clasificacion del animal</span></span>
        </td>
        <td>
            <label for="peso"></label> <span id="oPso">
        <input name="pso" type="text" id="pso1" class="colPeso"
        required oninvalid="this.setCustomValidity('Por favor entre el peso del animal')"
        style="width:93%" align="center" />
      <span class="textfieldRequiredMsg">Por favor entre el peso del animal</span></span>
        </td>
    </tr>
    <tr>
        <td>
            <label for="textfield"></label>
            <input name="animal" type="text" id="anml2" class="col1" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="hierro"></label>
            <input name="hierro" type="text" id="hierro2" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="clasificacion"></label>
            <input name="clasificacion" type="text" id="clsf2" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="peso"></label>
            <input name="peso" type="text" id="pso2" class="colPeso" style="width:93%"
            align="center" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="textfield"></label>
            <input name="animal" type="text" id="anml3" class="col1" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="hierro"></label>
            <input name="hierro" type="text" id="hierro3" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="clasificacion"></label>
            <input name="clasificacion" type="text" id="clsf3" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="peso"></label>
            <input name="peso" type="text" id="pso3" class="colPeso" style="width:93%"
            align="center" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="textfield"></label>
            <input name="animal" type="text" id="anml4" class="col1" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="hierro"></label>
            <input name="hierro" type="text" id="hierro4" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="clasificacion"></label>
            <input name="clasificacion" type="text" id="clsf4" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="peso"></label>
            <input name="peso" type="text" id="pso4" class="colPeso" style="width:93%"
            align="center" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="textfield"></label>
            <input name="animal" type="text" id="anml5" class="col1" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="hierro"></label>
            <input name="hierro" type="text" id="hierro5" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="clasificacion"></label>
            <input name="clasificacion" type="text" id="clsf5" style="width:96%"
            align="center" />
        </td>
        <td>
            <label for="peso"></label>
            <input name="peso" type="text" id="pso5" class="colPeso" style="width:93%"
            align="center" />
        </td>
    </tr>

我的实际脚本

     $('#table_left tr:not(#left_tittle)').bind('keyup change', function () {
         var $table = $(this).closest('table');
         var total = 0;
         var count = 0;
         $table.find('.colPeso:not(#left_tittle)').each(function () {
             total += +$(this).val();
         });

         $table.find('.col1:not(#left_tittle)').each(function () {
             if ($(this).html() != null) {
                 count = count + 1;
             }
         });

         totalPesoL = total;
         console.log("numero de animalesI: " + count);
         //console.log( "total: " + total + " totalPesoL: " + totalPesoL);
         //$table.find('input[name="total"]').val(total);
     });

我试图弄清楚如何使它工作的部分是：

  $table.find('.col1:not(#left_tittle)').each(function () {
      if ($(this).html() != null) {
          count = count + 1;
      }

或者

    $table.find('.col1').each(function () {
        if ($(this).val() != null || $(this).val() != "" || $(this).val() != " ") {
            count = count + 1;
        }
    });

出于某种原因，在我的控制台上，日志始终包含计数变量 = 20

col1 是图片左侧的第一列，它只有 3 个带有东西的单元格，值始终为 20

Answer 1

您正在寻找 a 的内容input，而不是html()某个块元素的内容。

你想要的测试是：

if ($(this).val() != '') {
  count = count + 1;
}

此外，:not您的选择器部分是不必要的：没有一个输入具有该 ID。所以：

$table.find('.col1').each(
  function() {
    var v = $(this).val() || "";

    if ( v.trim() != '' ){
      count = count + 1;  
    }
  }
);