jQuery的功能不工作在多行

我有一个由jQuery生成的表和一个按ENTER键时触发事件的函数。该表可以正确生成，但该功能只能在表格的第一个工作区中工作。jQuery的功能不工作在多行

我对表的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>'); 
       }); 
      } 
     }); 
    }); 
})

其中在数据库中，并将其放在基本要求一个值在空间中。问题是，在表格的第一行（动态生成），该函数完美地工作，但在后续行中它什么也不做。

在此先感谢您的帮助！

来源

2014-09-30 devilintheskies

你的方式来改变这一个：

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

附加到所有输入值这个表里面输入按钮的处理程序。

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

来源

2014-09-30 00:28:25

点击“enter”时我仍然遇到同样的问题。表格的第一行很好，但对于表格的其余部分它什么都不做。通过jQuery克隆方法添加了10行以上的表格。 – devilintheskies 2014-09-30 01:20:52

我能够通过首先生成我的表的骨架，然后添加功能来解决问题。你的代码为我简化了我所使用的ENTER函数的过程提供了很多帮助。非常感谢！ – devilintheskies 2014-09-30 02:58:55

您首先必须分别循环遍历每个tr，然后才能将td的目标定位在里面。

可以遍历使用3210这样行：

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

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

});

，它会经过所有的行，而不只是第一个。

来源

2014-09-30 00:19:37

此选项将改变我的表具有TD指数3 EVERY TD，而我只需要修改其中输入一直打到一行。 – devilintheskies 2014-09-30 01:19:56

这也只是一个例子，为了进入每一行。你应该能够从该代码推断。 – 2014-09-30 02:06:36

感谢您的回复。此代码实际上是有帮助的，但是我的问题似乎是处理ENTER事件的函数似乎在我的表构造之前加载。我现在正在寻找解决方案。非常感谢！ – devilintheskies 2014-09-30 02:49:22

jQuery的功能不工作在多行

回答

相关问题