Question

我想删除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); 
    }); 

Answer 1

你重新声明变量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并加入一个+

Answer 2

为什么不把表和它的脚放在适当的位置，只需更换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); 
    }); 
}); 

Answer 3

我建议你使用的行的模板，并为表，如果你需要对。如果您对append方法使用多个调用或者使用了过多的字符串连接，请注意，这是意大利式细面条代码，并且稍后在表格变大时进行维护是一场噩梦。模板使得您的HTML和Javascript更清洁。

这样做将与新模板标签中的最酷的方式：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

<template> 

但现在的问题是“唯一”的所有浏览器，但...支持IE https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#Browser_compatibility

您可以使用

• 胡子http://mustache.github.io/
• 手：为模板像一些JS库lebarsjs http://handlebarsjs.com/
• Underscorejs http://underscorejs.org/#template
• Ractivejs http://www.ractivejs.org/
• @流浪者，1888年提出了一个很有趣的文章（由于历史原因和约翰Resig的权威）约翰Resig的微型模板http://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>