How do I use these JSON results to build a dynamic html table in jQuery?

Question

I have a textfield where the user enters some number and clicks the "search" button. On clicking the "Search" buttton it displays all the associated JSON records with that number. How do I construct the dynamic HTML table by looping through each record? Here is my JSON structure returned from 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
       });
     });
   }
  }); 

How do I construct an HTML table and put these items into it, with each row having a radio button, number, and value?Please Help Me

Answer 1

$('#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)
        });
   }
});

Good luck!