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>