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>';代替{{1 }}

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/en-US/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提出了一篇非常有趣的文章（由于历史原因和John Resig的权威）John Resig的微模板http://ejohn.org/blog/javascript-micro-templating/你可以看到模板库需要处理什么样的东西。

大而流行的框架使用这些库（或类似技术），如Ember.js，Angular.js，Backbone等。

这是我最喜欢的模板库Rotherjs的一个例子，在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>

Answer 3

为什么不把桌子和它们放在适当的位置，只需要替换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);
    });
});

关闭json数据填充表

3 个答案: