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的功能不工作在多行

回答

相關問題