如何在从服务器获取数据的动态表的每一行中添加下拉列表？

Question

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>
            <!-- /block -->
        </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>

Answer 1

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

Answer 2

Here are couple createSelect functions that could work in your case. Plain JavaScript is used in those functions :-)

 $("body").append("createSelect() "); $("body").append("<br>"); $("body").append(createSelect()); $("body").append("<br><br><br>"); $("body").append(" createSelectDynamic() "); $("body").append("<br>"); var array = [{ "value": 1, "text": "NewJob" }, { "value": 2, "text": "InProgress" }, { "value": 3, "text": "CloseJob" }] $("body").append(createSelectDynamic(array)); $("body").append("<br><br><br>"); $("body").append("miniTable where createSelect() used ") $("body").append("<table><tr><td><td>2nd<td>third"); var select = createSelect(); $("td:first-child").append(select); function createSelect() { var select = document.createElement("select"); var option = document.createElement("option"); option.value = 1; option.text = "NewJob"; select.add(option); var option2 = document.createElement("option"); option2.value = 2; option2.text = "InProgress"; select.add(option2); var option3 = document.createElement("option"); option3.value = 3; option3.text = "CloseJob"; select.add(option3); return select; } function createSelectDynamic(values) { var select = document.createElement("select"); for (i = 0; i < values.length; i++) { var option = document.createElement("option"); option.value = values[i].value; option.text = values[i].text; select.add(option); } return select; } 

 table, th, td { border: 1px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>