正在关闭json数据填充的表
Closing json data populated table
我试图删除div中的现有表,并在页面每次接收json编码数据时创建一个新表。
我关桌子有问题吗?
html:
<div id="tblContent"></div>
jQ:
var um_getallusers='<table class="table-hover" id="um"><thead><tr><th class="col-md-1">ID</th><th class="col-md-4">Name</th><th class="col-md-4">username</th><th class="col-md-3"></th></tr></thead><tbody>';
$.getJSON('php/um_getallusers.php',function(dta){
$("#tblContent").remove(); //del table
$.each(dta,function(index,item){
um_getallusers+='<tr><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.username+'</td></tr>';
});
var um_getallusers='</tbody></table></table>'; // this is my problem
$('#um').html(um_getallusers);
});
您在已经使用变量um_getallusers
之后重新声明它,并且您正在重置值(通过使用um_getallusers='</tbody></table></table>';
而不是um_getallusers+='</tbody></table></table>';
。
var um_getallusers='<table class="table-hover" id="um"><thead><tr><th class="col-md-1">ID</th><th class="col-md-4">Name</th><th class="col-md-4">username</th><th class="col-md-3"></th></tr></thead><tbody>';
$.getJSON('php/um_getallusers.php',function(dta){
$("#tblContent").remove(); //del table
$.each(dta,function(index,item){
um_getallusers+='<tr><td>'+item.id+'</td><td>'+item.name+'</td><td>'+item.username+'</td></tr>';
});
um_getallusers+='</tbody></table></table>'; // this is my problem
$('#um').html(um_getallusers);
});
因此,删除额外的var
并添加一个+
我建议您为行和表使用模板(如果需要的话)。如果您对append方法进行了多次调用或使用了过多的字符串串联,请注意,这是意大利面条代码,以后当表变大时的维护将是一场噩梦。模板使您的HTML和Javascript更加干净。
最酷的方法是使用新的模板标签:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
<template>
但现在"仅"受所有浏览器支持,但。。。IEhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#Browser_compatibility
您可以使用几个js库进行模板化,例如:
- Mustachehttp://mustache.github.io/
- 把手sjshttp://handlebarsjs.com/
- Undercorejshttp://underscorejs.org/#template
- Ractivejshttp://www.ractivejs.org/
- @Roamer-1888提出了一篇非常有趣的文章(出于历史原因和John Resig的权威)John Resighttp://ejohn.org/blog/javascript-micro-templating/您可以看到模板库必须处理的内容
大型和流行的框架使用这些库(或类似的技术),如Ember.js、Angular.js、Backbone等。
这是我最喜欢的模板库Ractivejs在JSfiddle中的一个例子:http://jsfiddle.net/Katio/3usbro20/
在Stackoverflow片段中:
var Section = Ractive.extend({
el: 'container',
template: '#table-template',
data: {rows : [
{id : 1, name: "John", username: "Jony41"},
{id : 2, name: "Paul", username: "Pmac44"},
{id : 3, name: "George", username: "Harris44"},
{id : 4, name: "Ringo", username: "Star43"}
]
}
});
var rSection = new Section({
})
$("#button1").on("click", function(){
rSection.set(
"rows",
[
{id : 6, name: "Garry", username: "Kimo63"},
{id : 7, name: "Anatoly", username: "Karpy51"},
{id : 8, name: "Robert", username: "Bob42"},
{id : 9, name: "Mihail", username: "Boty12"}
]
)
})
<script src="https://rawgit.com/katio/FilesForFiddle/master/ractivejs/0.5.5/ractive20140828.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="x-template" id="table-template">
<table>
<thead>
<tr>
<th> ID </th>
<th> NAME </th>
<th> USER NAME</th>
</tr>
</thead>
<tbody>
{{#rows}}
<tr>
<td> {{id}} </td>
<td> {{name}} </td>
<td> {{username}}</td>
</tr>
{{/rows}}
</tbody>
<tbody>
</tbody>
</table>
<input type="button" value = "Load JSON and update only the rows" id="button1">
</script>
<div id="container"></div>
为什么不保留表及其thead,只替换tbody的内容?
首先确保表、它的thead和tbody在DOM中就位,然后:
$.getJSON('php/um_getallusers.php',function(dta) {
var $tbody = $("#um tbody").empty();
$.each(dta, function(index, item) {
$tr = $("<tr/>").appendTo($tbody);
$('<td/>').text(item.id).appendTo($tr);
$('<td/>').text(item.name).appendTo($tr);
$('<td/>').text(item.username).appendTo($tr);
});
});
- 如何在Highchart中动态填充数据
- 使用jquery在选择框中的选项中填充数据
- 使用jquery、javascript重新填充数据
- 如何从 API 填充数据并加载到下拉列表中
- 通过遍历JSON文件来填充数据列表选项
- 在引导模式中,点击相应的datatables行中的按钮,填充数据
- 当选择District时,PHP将从数据库中填充数据
- 从角度工厂返回数据,返回对象后填充数据
- 高图表 - 从数组填充数据
- 在承诺函数从 pouchdb 填充数据之前触发 Ionic/Angular $watch的问题
- 无法用同位素填充数据
- 使用 php 发送 json 填充数据表
- JQuery - 在表单中填充数据的正确方法
- 翡翠选择字段填充数据
- C# MVC 填充数据表中的下拉列表组
- 自动填充数据被javascript的onchange事件覆盖
- 如何在html中只使用ng repeat来填充数据,而不使用repeat html's元素
- 用Firebase和Angular填充数据表
- 通过JS Ajax调用问题填充数据
- 使用两个ajax调用在两个html表中填充数据