Javascript 关闭json数据填充表

我试图删除div中的现有表，并在每次页面接收json编码数据时创建一个新表

我关桌子有问题吗

html:

jQ:

var um_getallusers='IDNameusername'；
$.getJSON（'php/um_getallusers.php'，函数（dta）{
$（“#tblContent”）.remove（）；//删除表格
$。每个（dta、功能（索引、项目）{
um_getallusers+=''+item.id+''+item.name+''+item.username+''；
});
var um_getallusers=''；//这是我的问题
$（'um'）.html（um#u getalUsers）；
});

在使用变量

um\u getallusers

之后，您正在声明该变量，并且正在重置该值（通过使用

um\u getallusers=''；而不是
um\u getallusers+=''；
）

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 um_getallusers='IDNameusername'；
$.getJSON（'php/um_getallusers.php'，函数（dta）{
$（“#tblContent”）.remove（）；//删除表格
$。每个（dta、功能（索引、项目）{
um_getallusers+=''+item.id+''+item.name+''+item.username+''；
});
这是我的问题
$（'um'）.html（um#u getalUsers）；
});

因此，删除额外的
var
并添加一个
+
为什么不保留表格及其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);
    });
});

$.getJSON（'php/um_getallusers.php'，函数（dta）{
var$tbody=$（“#um tbody”）.empty（）；
$。每个（dta、功能（索引、项目）{
$tr=$（“”）.appendTo（$tbody）；
$（''）.text（item.id）.appendTo（$tr）；
$（''）.text（item.name）.appendTo（$tr）；
$（''）.text（item.username）.appendTo（$tr）；
});
});
我建议您对行和表使用模板（如果需要）。如果您多次调用append方法或使用过多的字符串连接，请注意，这是意大利面代码，以后在表变大时进行维护是一场噩梦。模板使您的HTML和Javascript变得更干净

最酷的方法是使用新的模板标记：


身份证件
名称
用户名
{{#行}
{{id}
{{name}}
{{username}}
{{/行}
@mitogh:我不这么认为。是的，这是一种方式，但在我的情况下，我需要能够删除和创建表。谢谢。如果表及其标题总是相同的，那么为什么要替换它们呢？原始代码的缺陷在于，将带有
id=“um”
的表附加到带有
id=“um”的容器中
。您现在有两个UM。我正在使用此DIV填充具有不同标题的表。John Resig的也值得一提。@Roamer-1888我在答案中添加了John Resig的微模板。
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);
    });

$.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);
    });
});

<template>