JQuery를 사용하여 표 셀 추가

Question

약 4 열의 HTML 표가 있습니다. 장고를 사용하여 SQL 테이블에서 정보를 가져 오는 Ajax를 사용하여 데이터를 쿼리하고 있습니다. 마지막 열에는 드롭 다운 메뉴가 있어야합니다.

내가 아약스에서 다시 받고 있어요 내 JSON 정보의 예는 다음과 같습니다

이

[[1, "abc", 1, ["[2013-09-30]", "[2013-12-02]"]] 
[[2, "def", 1, ["[2013-09-30]"]] 

그것은 기본적으로 ID, 일부 문자열, 주파수 및 날짜를 ​​표시합니다. 나는 25 개의 서로 다른 신분증을 가지고있다. 각 ID의 처음 세 데이터 요소는 모두 동일한 정보를 가지지 만 유일한 다른 것은 내 날짜입니다. 그래서 각 ID의 날짜를 선택하는 드롭 다운 메뉴가 필요합니다.

내 문제는 내 테이블의 드롭 다운 메뉴가 제대로 작동하지 않는다는 것입니다. 첫 번째 행의 모든 ​​날짜를 표시하고 나머지 행의 다른 모든 메뉴는 비어 있습니다. 나는 나의 루프에서 문제를 안다. 나는 나의 드롭 다운 메뉴를 테이블에 추가하지만 무슨 일이 일어나는지 알 수 없다. 어떤 도움이라도 대단히 감사하겠습니다.

HTML

<table id = "templates" border = "1"> 
<thead> 
    <tr> 
     <th> Template ID </th> 
     <th> Template Name </th> 
     <th> Freq Multiplier </th> 
     <th> As of Date </th> 
    </tr> 
</thead> 
<tbody> 
</tbody> 
</table> 

JQUERY

<script type="text/javascript"> 
$(document).ready(function fill_table() { 
$.ajax({ 
    type:"GET", 
    url: "/Tplots/ajax_temp/", 
    dataType:'json', 
    success: function(response) { 
     for(var i = 0; i< response.length; i++) 
     { 
      var item = response[i]; 
      for (var j = 0; j<10;j++) { 
       var tempID = item[j]; 
       j = 1; 
       var tempName = item[j]; 
       j =2; 
       var freqM = item[j]; 
       j = 3; 
       var as_of = item[j]; 
       j=4; 
       $('#templates tbody').append("<tr id = i><td>" + tempID + "</td><td>" + tempName + "</td><td>" + freqM + "</td><td><select name='dropdown' id = 'dropdown'></select></td></tr>");    
       for (var k = 0; k<as_of.length; k++) 
       { 
        var asofdate = as_of[k]; 
        $('#dropdown').append($("<option>"+asofdate+"</option>")); 
       } 
      } 
     } 
    } 
}) 
    }) 
    </script> 

Answer 1

당신은 당신의 스크립트가 생성 된 HTML을 살펴해야한다. 모든 행에 동일한 ID를 지정하고 다운리스트를 드롭하는 것처럼 보입니다.

var $table = $("#templates tbody"); 
... 

var $row = $("<tr>").appendTo($table); 
... 
var $td = $("<td>").appendTo($row); 
var $select = $("<select>").appendTo($td); 
for(var k=0,size=as_of.length; k<size; k++) 
    $("<option>").appendTo($select).text(as_off[k]); 
... 

Answer 2

왜 테이블을 구성하지 데이터를 처리하는 동안 다음의 jQuery 셀렉터를 다음과 같이 만들 올바른 행을 선택하거나 jQuery를에게 객체를 저장할 수 있도록 어느 고유 한 ID를 할당?

<script type="text/javascript"> 
$(document).ready(function fill_table() { 
$.ajax({ 
type:"GET", 
url: "/Tplots/ajax_temp/", 
dataType:'json', 
success: function(response) { 
    for(var i = 0; i< response.length; i++) 
    { 
     $('#templates tbody').append("<tr>");    
     var item = response[i]; 
     for (var j = 0; j<4 ;j++) { 
      if (j <> 3) { // not the last column 
       $('#templates tbody').append("<td>" + item[j] + "</td>"); 
      } else { 
       $('#templates tbody').append("<td><select>");    
       for (var k = 0; k<as_of.length; k++) { 
        var asofdate = as_of[k]; 
        $('#templates tbody').append("<option>"+asofdate+"</option>"); 
       } 
       $('#templates tbody').append("</td>"); 
      } 
     } 
     $('#templates tbody').append("</tr>");   
    } 
}) 
}) 
</script>