Как я могу использовать эти результаты JSON для создания динамической HTML-таблицы в JQuery? - PullRequest
Новая
       4

Как я могу использовать эти результаты JSON для создания динамической HTML-таблицы в JQuery?

0 голосов
/ 13 октября 2010

У меня есть текстовое поле, где пользователь вводит некоторое число и нажимает кнопку «поиск».При нажатии кнопки «Поиск» отображаются все связанные записи JSON с этим номером.Как построить динамическую таблицу HTML, просматривая каждую запись?Вот моя структура JSON, возвращенная из PHP: 

[{"number":"ABC123-product1","value":"HN895","status":true},
{"number":"AYD223-product2","value":"JU226","status":true},
{"number":"AXU323-product3","value":"OL223","status":true}]  

$('#button').click(function(e){
    if($("#txt1field")!=''){
      $.getJSON("student.php",{'no' : $("#txt1field").attr('value'),'search' :''},
        function(data){
           $.ajaxSetup ({ cache: false}); 
           var i=0;
           $.each(data, function(number,value) {
        alert(" Number=="+data[i].number+"value==="+data[i].value);
        i++;
           //How do i construct HTML TABLE and put this items  in to a table with each row having the 
          radiobutton , number,value
       });
     });
   }
  });

Как мне построить таблицу HTML и поместить в нее эти элементы, в каждой строке есть переключатель, число и значение?*

1 Ответ

2 голосов
/ 13 октября 2010 
$('#button').click(function(e){
    if($("#txt1field")!=''){
      $.getJSON("student.php",{'no' : $("#txt1field").attr('value'),'search' :''},
        function(data){
           $.ajaxSetup ({ cache: false});
           var t;
           $.each(data, function(number,item) {
              t += '<tr><td><input type="radio" ... /></td><td>'+item.number+'</td><td>'+item.value+'</td></tr>';
           });


           //insert a new table
           t = '<table ...>'+t+'</table>';
           $('div#output').html(t); 


           //or "append" if you wish to insert the rows in an existing table
           $('table#output').append(t)
        });
   }
});

Удачи!

...