How to add drop down list in every row of dynamic table which fetch data from server?

ajax, html, javascript, jquery, json

Solution

use it. i think this is helpful for you

Jquery Code Generate Dynamic append Row:

$(function(){

    for(var i=0;i<3;i++){
       var trd="";
    trd +="<tr>";
    trd +="<td>";
    trd+="<select class='input-small'><option value=''>Type</option><option value=''>Type1</option></select>";
    trd+="</td>";
    trd+="<td><input type='text'> </td>";
    trd+="<td><input type='text'> </td>";
    trd+="</tr>";
         $(".table-bordered tbody").append(trd); 
    }



});

Click To Demo

Problem

I want to add static drop downlist to every row of dynamic table which fetch the data from server, How I will do this? I want to make same like this,(please check drop downlist type) but it will also fetch data from server and every row of column will have drop drownlist. Following is updated and working code, thanks to @angu Structure of drop down list. ``` <select > <option value="1">NewJob</option> <option value="2">InProgress</option> <option value="3">CloseJon</option> </select> ``` Dynamic Table ``` <div class="span9" id="content"> <div class="row-fluid"> <div class="block"> <div class="navbar navbar-inner block-header"> <div class="muted pull-left">Carpenter Services</div> </div> <div class="block-content collapse in"> <div class="span12"> <table class="data-contacts1-js table table-striped" > <thead> <tr> <th>ID</th> <th>Customer Name</th> <th>Customer Mobile</th> <th>Customer Email</th> </tr> </thead> <tbody> </tbody> </table> </div> <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button> </div> </div>  </div> ``` JavaScript ``` <script> function fetchData1(){ $(".data-contacts1-js tbody").empty(); $.get("http://localhost/service/Services.php", function(data) { var obj=JSON.parse(data); for(var i in data){ var tr=$("<tr></tr>"); tr.append( "<td>" + obj[i].b_id + "</td>" + "<td>" + obj[i].cust_name + "</td>" + "<td>" + obj[i].cust_mobile + "</td>" + "<td>" + obj[i].cust_email + "</td>" ); tr.append("<select class='input-small'><option value='New Job'>NewJob</option><option value='WIPJob'>WIP Job</option></select>"); $(".data-contacts1-js tbody").append(tr); i++; } }); } $(document).ready(function(){ $(".data-contacts1-js tbody").empty(); $('#fetchContacts1').click(function() { fetchData1(); }); }); </script> ```

Original source