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

Posted

技术标签:

【中文标题】如何在从服务器获取数据的动态表的每一行中添加下拉列表?【英文标题】:How to add drop down list in every row of dynamic table which fetch data from server? 【发布时间】:2015-04-16 22:57:08 【问题描述】:

我想将静态下拉列表添加到从服务器获取数据的动态表的每一行,我将如何做到这一点? 我想创建相同的like this,(请检查下拉列表类型),但它也会从服务器获取数据,并且每一行列都会有下拉列表。

以下是更新和工作代码,感谢@angu

下拉列表的结构。

    <select >       
        <option value="1">NewJob</option>
        <option value="2">InProgress</option>
        <option value="3">CloseJon</option>
    </select>

动态表格

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

【问题讨论】:

我认为您必须从 fetchData1 函数调用嵌套的 Ajax JSON 调用 您的下拉项目是否来自数据库?或者它是静态的 - 意味着每个 tiem 都会有这 3 个项目(NewJob、inProgress、close job)? @Prog,它将是静态的,请再次检查我更新了.. 【参考方案1】:

这里有几个 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;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】:

【参考方案2】:

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

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

【讨论】:

你可以这样做。 Id 是唯一的,因此您生成动态 id 。您在 ajax 响应 obj[i].b_id 中获得了动态数据,例如:"" ; 谢谢,如何在javascript中获取这个动态选择列表的id, 我想像 我认为连接使用它 ""

以上是关于如何在从服务器获取数据的动态表的每一行中添加下拉列表?的主要内容,如果未能解决你的问题,请参考以下文章

过滤后动态添加到表的行不隐藏

Easy UI combogrid动态加载数据

如何在数据表的每一行添加按钮?

从 JSON 数据获取动态表的列标题

C#DataGrid如何绑定其中一列为下拉框?并且获取值

如何将在从控制台获取的 URL 中找到的特定字符串替换为在 Ruby 文本文件中写入的每一行中找到的文件内容?