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

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

提问by geeks

I want to add static drop downlistto 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

以下是更新和工作代码，感谢@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

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>

采纳答案by Angu

use it. i think this is helpful for you

用它。我认为这对你有帮助

Jquery Code Generate Dynamic append Row:

Jquery 代码生成动态追加行：

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

点击演示

回答by jyrkim

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

这里有几个 createSelect 函数可以在您的情况下使用。这些函数中使用了纯 JavaScript :-)

$("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>