Добавить ячейку таблицы с помощью JQuery

Question

У меня есть таблица HTML с четырьмя столбцами. Я запрашиваю данные с помощью Ajax, который извлекает информацию из таблицы SQL с помощью Django. Для последнего столбца мне нужно иметь выпадающее меню.

Пример моей JSON информации я получаю назад от Ajax является:

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

Это в основном показывает ID, некоторые строки, частоту и даты. У меня четверо 25 разных идентификаторов. Первые три точки данных в каждом идентификаторе имеют одну и ту же информацию, но единственное, что отличается от моих дат. Вот почему мне нужно выпадающее меню, чтобы выбрать дату для каждого 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 сценарий генерируется. Похоже, вы назначаете один и тот же идентификатор всем строкам и выпадающим списком. Либо присвоить уникальный идентификатор, так селектор JQuery может выбрать правильную строку или сохранить JQuery объект создается следующим образом:

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

Почему бы не построить таблицу во время обработки данных?

<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>