關閉JSON數據填充表

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

我建議您根據需要為行和表使用模板。 如果您使用幾次對append方法的調用或過多的字符串連接，請當心，這是意大利面條代碼，后來當表變大時進行維護是一場噩夢。 模板使您的HTML和Javascript更加整潔。

最酷的方法是使用新的模板標簽： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/template

<template>

但是目前所有瀏覽器都“僅”支持，但... IE https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template#Browser_compatibility

您可以使用多個js庫進行模板制作，例如：

• 小胡子http://mustache.github.io/
• Handlebarsjs http://handlebarsjs.com/
• Underscorejs http://underscorejs.org/#template
• Ractivejs http://www.ractivejs.org/
• @ Roamer-1888推薦了一篇非常有趣的文章（出於歷史原因和約翰·雷西格的權威）約翰·雷西格的微型模板http://ejohn.org/blog/javascript-micro-templating/您可以看到模板庫是什么樣的東西必須處理。

大型且流行的框架使用這些庫（或類似技術），例如Ember.js，Angular.js，Backbone等。

這是我最喜歡的用於在JSfiddle中進行模板化的庫Ractivejs的示例： 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> 

Answer 3

為什么不把桌子和它的桌子留在原處，而只是更換床身上的東西呢？

首先，請確保該表及其主題和正文在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);
    });
});