javascript - 如何获取一列有多少个单元格有数据的值

Question

大家好，我正在尝试做一些我有一张桌子的东西，比如：

 <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>
  <input name="animal" type="text" id="anml1" style="width:96%" align="center"/></td>
  <td><label for="hierro"></label>
  <input name="hierro" type="text" id="hierro1" style="width:96%" align="center" /></td>
  <td><label for="clasificacion"></label>
  <input name="clasificacion" type="text" id="clsf1" style="width:96%" align="center" /></td>
  <td><label for="peso"></label>
  <input name="peso" type="text" id="pso1" style="width:93%" align="center" /></td>
</tr>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml2" 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" style="width:93%" align="center" /></td>
</tr>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml3" 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" style="width:93%" align="center" /></td>
</tr>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml4" 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" style="width:93%" align="center" /></td>
</tr>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml5" 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" style="width:93%" align="center" /></td>
</tr>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml6" style="width:96%" align="center" /></td>
  <td><label for="hierro"></label>
  <input name="hierro" type="text" id="hierro6" style="width:96%" align="center" /></td>
  <td><label for="clasificacion"></label>
  <input name="clasificacion" type="text" id="clsf6" style="width:96%" align="center" /></td>
  <td><label for="peso"></label>
  <input name="peso" type="text" id="pso6" style="width:93%" align="center" /></td>
</tr>

我想知道小动物有多少细胞具有有效数据或与 null 不同

我正在尝试一些java脚本，但这就是我所拥有的

    $('#table_left tr:not(#left_tittle)').bind('keyup change', function() {
        var variable = "";
        var count = 0;
        for ( var i = 1; i <= 20; i++){
            variable = 'anml'+i;
            var table = document.getElementById('anml'+i).value;

        }
        });

我尝试的一切都不起作用，我不知道我做错了什么

编辑：一些代码更改。

  <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>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml6" class="col1"
  style="width:96%" align="center" /></td>
  <td><label for="hierro"></label>
  <input name="hierro" type="text" id="hierro6" style="width:96%" align="center" /></td>
  <td><label for="clasificacion"></label>
  <input name="clasificacion" type="text" id="clsf6" style="width:96%" align="center" /></td>
  <td><label for="peso"></label>
  <input name="peso" type="text" id="pso6" class="colPeso"
  style="width:93%" align="center" /></td>
</tr>
<tr>
  <td><label for="textfield"></label>
  <input name="animal" type="text" id="anml7" class="col1"
  style="width:96%" align="center" /></td>
  <td><label for="hierro"></label>
  <input name="hierro" type="text" id="hierro7" style="width:96%" align="center" /></td>
  <td><label for="clasificacion"></label>
  <input name="clasificacion" type="text" id="clsf7" style="width:96%" align="center" /></td>
  <td><label for="peso"></label>
  <input name="peso" type="text" id="pso7" class="colPeso"
  style="width:93%" align="center" /></td>
</tr>

Answer 1

$(function () {
    $("#table_left input").bind("blur", function () {
        checkValidInput($(this));
    });
});

function checkValidInput(e) {
    var name = e.attr("name");
    var val = e.val();
    //check required (add required to class attribute)
    //e.g <input name="animal" class='required'
    if (e.hasClass("required") && val.length == 0) {
        //do something
        alert(name + " is null");
    }

    //validation with specify name

    switch (name) {
        case "hierro":
            //do validation
            if (val != 'hello') 
                alert(name + "Please enter hello");
            break;
    }
}

你需要这样的东西吗？

http://jsfiddle.net/7w8vE/1/

Answer 2

也许你正在寻找这个：

 $('#table_left tr:not(#left_tittle)').bind('input', function (event) {        
 if ($("#"+event.target.id).val() != null && $("#"+event.target.id).val() != "")     
 {
     alert("id:" + event.target.id);
     alert("content: "+$("#"+event.target.id).val());
 }
 });

看看这个： jsfiddle

我修改了另一个版本，你可以通过编辑我在这里创建的示例来做任何你想做的事情：

 $('#table_left').bind('input', function () {
 var ids = new Array();
 var vals = new Array();  
 $('#table_left td').each(function () {         
     if ($(this).find("input").val() != null && $(this).find("input").val().trim() != "") {
         ids.push($(this).find("input").attr("id"));
         vals.push($(this).find("input").val());
         //alert("id: " + $(this).find("input").attr("id"));
         //alert("content: " + $(this).find("input").val());
     };
 });

 if(ids.length>0){
     alert(ids);
     alert(vals);
 }

});

这是jsfiddle。