Question

我有一个由jQuery生成的表，以及一个在按Enter时触发事件的函数。该表生成正确，但该函数仅适用于表的第一个部分。

我的表格的html如下：

<table border="1" id="PlantillaTable" name="PlantillaTable">
<tbody>
    <tr>
        <th rowspan="2" scope="col">Cargo</th>
        <th colspan="12" scope="col">Escenario de Registro</th>
    </tr>
    <tr>
        <td colspan="2">Folio</td>
        <td colspan="2">Propietario</td>
        <td >Grupo</td>
        <td >Edad</td>
        <td colspan="2">Folio</td>
        <td colspan="2">Suplente</td>
        <td >Grupo</td>
        <td >Edad</td>
    </tr>
    <tr id="FilaTable">
        <th scope="row" col="1" row="1">Cargo</th>
        <td col="2" row="1">LISTA</td>
        <td col="3" row="1">
            <input type="text" id="AspiranteField" name="AspiranteField" placeholder="FOLIO" />
        </td>
        <td col="4" row="1">FOTO</td>
        <td col="5" row="1">NOMBRE</td>
        <td col="6" row="1">GRUPO</td>
        <td col="7" row="1">EDAD</td>
        <td col="8" row="1">LISTA</td>
        <td col="9" row="1">
            <input type="text" id="AspiranteField" name="AspiranteField" placeholder="FOLIO" />
        </td>
        <td col="10" row="1">FOTO</td>
        <td col="11" row="1">NOMBRE</td>
        <td col="12" row="1">GRUPO</td>
        <td col="13" row="1">EDAD</td>
    </tr>
</tbody>

我的功能如下：

$.fn.pressEnter = function(fn) {  
    return this.each(function() {  
        $(this).bind('enterPress', fn);
        $(this).keyup(function(e){
            if(e.keyCode == 13)
            {
              $(this).trigger("enterPress");
            }
        })
    });  
 }; 

$('input').pressEnter(function(){
    var trid = ($(this).closest('tr').attr('id'));
    var opcion = ($(this).closest('td').index());
    var valor = $(this).val();
    $.getJSON("php/getAspiranteNombre.php?AspiranteId="+valor,function(data){
        $.each(data,function(index,item) {
            if(opcion < 4)
            {
                $("#"+trid+" td").eq(3).html('<p>'+item.NAME+'</p>');
                $("#"+trid+" td").eq(4).html('<p>'+item.GRUPO+'</p>');
                $.getJSON("php/getFoto.php?AspiranteId="+valor,function(data2){
                    $("#"+trid+" td").eq(2).html('<img src="aspiranteFoto/thumb_'+data2+'" width="50px" height="50px"/>');
                });
                $.getJSON("php/getEdad.php?Nacimiento="+item.EDAD,function(data3){
                    $("#"+trid+" td").eq(5).html('<p>'+data3+'</p>');
                });
            }
            else
            {
                $("#"+trid+" td").eq(9).html('<p>'+item.NAME+'</p>');
                $("#"+trid+" td").eq(10).html('<p>'+item.GRUPO+'</p>');
                $.getJSON("php/getFoto.php?AspiranteId="+valor,function(data2){
                    $("#"+trid+" td").eq(8).html('<img src="aspiranteFoto/thumb_'+data2+'" width="50px" height="50px"/>');
                });
                $.getJSON("php/getEdad.php?Nacimiento="+item.EDAD,function(data3){
                    $("#"+trid+" td").eq(11).html('<p>'+data3+'</p>');
                });
            }
        });
    });
})

这基本上要求数据库中的值并将其放在空格中。问题在于，在表格的第一行（动态生成）中，该函数完美地工作，但在后续行中它没有做任何事情。

提前感谢您的帮助！

Answer 1

首先必须分别遍历每个tr，然后您可以将td内部定位。

您可以使用$.each()循环遍历行，如下所示：

$("table tr").each(function(i,v){

  $(this).find("td:eq(3)").html('<p>'+item.NAME+'</p>');
  ....

});

它将遍历所有行，而不仅仅是第一行。

Answer 2

你必须改变这个方法：

$("#PlantillaTable").find("input").keyup(function(ev) {
    if (ev.which === 13 ) {
      //yout code here...
    }
});

将此按钮处理程序附加到此表中的所有输入值。

http://jsfiddle.net/csdtesting/jkfL2v5s/

jquery函数不能处理多行

2 个答案: