如何添加动态表从服务器上获取数据的每一行中下拉列表中？ [英] How to add drop down list in every row of dynamic table which fetch data from server?
本文介绍了如何添加动态表从服务器上获取数据的每一行中下拉列表中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想补充的静滴downlist 以动态表的每一行从服务器获取数据，我将如何做到这一点？
我想使同这样，（请检查下降downlist类型）但它也将从服务器上获取数据和列中的每一行都会有下降drownlist。
以下是更新和工作code，这要归功于@angu
下拉列表中的结构。
＆LT;选择＆GT;
＆LT;期权价值=1＆GT; NewJob＆LT; /选项＆GT;
＆LT;期权价值=2＆GT; INPROGRESS＆LT; /选项＆GT;
＆LT;期权价值=3＆GT; CloseJon＆LT; /选项＆GT;
＆LT; /选择＆GT;
动态表
＆LT; DIV CLASS =span9ID =内容＆GT;
＆LT; DIV CLASS =排液＆GT;
＆LT; DIV CLASS =块＆GT;
＆LT; DIV CLASS =导航栏导航栏，内部块标头＆GT;
＆LT; DIV CLASS =静音拉左＆GT;木匠服务＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;＆GT DIV CLASS =块内容崩溃;
＆LT; DIV CLASS =span12＆GT;
＆LT;表类=数据contacts1-JS表的表条纹＆GT;
＆LT; THEAD＆GT;
＆其中; TR＆GT;
百分位＆GT; ID＆LT; /第i个
＆LT;第i个客户名称和LT; /第i个
百分位＆GT;客户移动和LT; /第i个
＆LT;第i个客户的电子邮件和LT; /第i个
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT; TBODY＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT;按钮ID =fetchContacts1级=BTN BTN-默认的类型=提交＆GT;刷新＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;！ - /块 - ＆GT;
＆LT; / DIV＆GT;
的JavaScript
＆LT;脚本＆GT;
功能fetchData1（）{
$（数据contacts1-JS TBODY）空（）。
$获得（HTTP：//localhost/service/Services.php功能（数据）{
变种物镜= JSON.parse（数据）;
对于（数据变种I）{
VAR TR = $（＆LT; TR＆GT;＆LT; / TR＆gt;中）;
tr.append（
＆其中; TD＆gt;中+ OBJ [I] .b_id +＆LT; / TD＆gt;中+
＆其中; TD＆gt;中+ OBJ [I] .cust_name +＆LT; / TD＆gt;中+
＆其中; TD＆gt;中+ OBJ [I] .cust_mobile +＆LT; / TD＆gt;中+
＆其中; TD＆gt;中+ OBJ [I] .cust_email +＆LT; / TD＆gt;中
）;
tr.append（＆LT;选择类='输入小'＆GT;＆LT;期权价值='新工作'＆GT; NewJob＆LT; /选项＆GT;＆LT;期权价值='WIPJob'＆GT; WIP任务和LT; /选项＆GT;＆LT ; /选择＆gt;中）;
$（数据contacts1-JS TBODY）追加（TR）。
我++;
}
}）;
}
$（文件）。就绪（函数（）{
$（数据contacts1-JS TBODY）空（）。
$（'＃fetchContacts1）。点击（函数（）{
fetchData1（）;
}）;
}）;
＆LT; / SCRIPT＆GT;
解决方案
使用它。我认为这是对你有帮助
jQuery的code生成动态添加行：
$（函数（）{
为（变种I = 0; I＆所述; 3;我++）{
VAR TRD =;
TRD + =＆其中; TR＆gt;中;
TRD + =＆LT; TD＆gt;中;
TRD + =＆LT;选择类='输入小'＆GT;＆LT;期权价值=''＆GT;类型＆lt; /选项＆GT;＆LT;期权价值=''＆GT;类型1＆LT; /选项＆GT;＆LT; /选择＆gt;中;
TRD + =＆LT; / TD＆gt;中;
TRD + =＆LT; TD＆GT;＆LT;输入类型='文本'＆GT;＆LT; / TD＆gt;中;
TRD + =＆LT; TD＆GT;＆LT;输入类型='文本'＆GT;＆LT; / TD＆gt;中;
TRD + =＆LT; / TR＆gt;中;
$（表镶上TBODY。）追加（TRD）。
}
}）;
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>
解决方案
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);
}
});
这篇关于如何添加动态表从服务器上获取数据的每一行中下拉列表中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
