表不显示正确

Question

以我弹簧应用，我的意见每一个具有这样的结构（JSP代码的renderization后的HTML代码）：

<!-- Nav tabs --> 
<ul id="mainTab" class="nav nav-tabs" role="tablist"> 
    <li class="active"><a href="#home-Fornecedor" data-toggle="tab">Listagem</a></li> 
    <li><a href="#cadastra-Fornecedor" data-toggle="tab">cadastra</a></li> 
    <li><a href="#altera-Fornecedor" data-toggle="tab">altera</a></li> 
    <li><a href="#remove-Fornecedor" data-toggle="tab">remove</a></li> 
</ul> 
<!-- Tab panes --> 
<div class="tab-content"> 
    <div class="tab-pane active" id="home-Fornecedor"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Listagem</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <div class="btn-group"> 
          <button type="button" class="btn btn-default items">5</button> 
          <button type="button" class="btn btn-default items">10</button> 
          <button type="button" class="btn btn-default items">15</button> 
          <button type="button" class="btn btn-default items">20</button> 
         </div> 
        </div> 
        <div class="col-md-4"></div> 
        <div class="col-md-4"> 
         <div class="btn-group"> 
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Ordem <span class="caret"></span> 

          </button> 
          <ul class="dropdown-menu dropdown-menu-right" role="menu"> 
           <li><a class="ordem" href="0">id</a></li> 
           <li><a class="ordem" href="1">cnpj</a></li> 
           <li><a class="ordem" href="2">razaoSocial</a></li> 
           <li><a class="ordem" href="3">endereco</a></li> 
           <li><a class="ordem" href="4">contato</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
      <table class="table" id="main-Fornecedor"> 
       <thead> 
        <tr> 
         <th class="col" data-property="#"></th> 
         <th class="col" data-property="id">id</th> 
         <th class="col" data-property="cnpj">cnpj</th> 
         <th class="col" data-property="razaoSocial">razaoSocial</th> 
         <th class="col" data-property="endereco">endereco</th> 
         <th class="col" data-property="contato">contato</th> 
         <th class="col" data-property=""></th> 
        </tr> 
       </thead> 
       <tbody class="content"></tbody> 
       <tfoot> 
        <tr> 
         <td class="comando" data-nome="altera" data-action="/loja/Fornecedor/altera"></td> 
         <td class="comando" data-nome="remove" data-action="/loja/Fornecedor/remove"></td> 
        </tr> 
       </tfoot> 
      </table> 
      <div align="center"> 
       <ul class="pagination pagina"></ul> 
      </div> 
     </div> 
    </div> 
    <div class="tab-pane" id="cadastra-Fornecedor">...</div> 
    <div class="tab-pane" id="altera-Fornecedor">...</div> 
    <div class="tab-pane" id="remove-Fornecedor">...</div> 
</div> 

的标签 Home内部

，我生成一个使用json文件来填充它的表格。此表格生成正确当我点击带有文本cadastra或altera的按钮时，在相同名称的选项卡中，在某些视图中，我需要插入一个类似于此的新结构。最后一个表格正在生成中继行。

该表的renderized码是这样的：

<table class="table" id="Endereco"> 
    <thead> 
     <tr> 
      <th class="col" data-property="#">#</th> 
      <th class="col" data-property="id">id</th> 
      <th class="col" data-property="logradouro">logradouro</th> 
      <th class="col" data-property="numero">numero</th> 
      <th class="col" data-property="complemento">complemento</th> 
      <th class="col" data-property="bairro">bairro</th> 
      <th class="col" data-property="cidade">cidade</th> 
      <th class="col" data-property="estado">estado</th> 
      <th class="col" data-property="cep">cep</th> 
      <th class="col" data-property=""></th> 
     </tr> 
    </thead> 
    <tbody class="content"></tbody> 
    <tfoot> 
     <tr> 
      <td class="comando" data-nome="altera" data-action="Endereco/altera"></td> 
      <td class="comando" data-nome="remove" data-action="Endereco/remove"></td> 
     </tr> 
    </tfoot> 
</table> 

jQuery代码插入在表中的行是这样的：

function load_content(lista, target, pagina, items, ordem, entity) { 
    var atributos = []; 
    $(".col").each(function() { 
     var property = $(this).data('property'); 
     atributos.push(property); 
    }); 

    $.ajax({ 
     type: 'GET', 
     url: lista, 
     data: { 
      pagina: pagina, 
      items: items, 
      ordem: ordem 
     } 
    }).done(function (data) { 
     var json = jQuery.parseJSON(data); 
     target.find("tbody.content").empty(); 
     $.each(json.item, function (index, item) { 
      var row = $('<tr>'); 
      console.log(':linha'); 
      for (var i = 0; i < atributos.length; i++) { 
       if (atributos[i] == '#') { 
        console.log('::checkbox'); 
        row.append('<td><input type="checkbox" name="' + entity + '" value="' + item.id + '"></td>'); 
       } else if (atributos[i] == '') { 
        console.log('::comandos'); 
        var col = $('<td>'); 
        var group = $('<div class="btn-group">'); 
        $(".comando").each(function() { 
         var nome = $(this).data("nome"); 
         var action = $(this).data("action"); 
         group.append('<button type="button" class="btn btn-sm btn-primary action" data-target="' + nome + '-' + entity + '" data-action="' + action + '/' + item.id + '">' + nome + '</button>'); 
        }); 
        col.append(group); 
        row.append(col); 
       } else { 
        var token = item[atributos[i]]; 
        console.log('::token = ' + token); 
        row.append('<td>' + token + '</td>'); 
       } 
      } 
      target.find("tbody.content").append(row); 
      target.find("tfoot").each(function() { 
       $(this).hide(); 
      }); 
     }); 
    }); 
} 

上面的代码被用于创建两个表：无论是主页面还是cadastra或altera选项卡中的选项卡（当需要时）。

当我在浏览器中打开该页面，并单击按钮cadastra，我得到这个：

在来自浏览器的开发者工具看，我的标签<tbody class="content"></tbody>脚本生成的内部通知一个大线（<tr>）具有三个的内容（块<td>...</td>图像中应该开始和一条线的端部），这样的：

但是在我的json文件中，我只有一个项目，它与表格中显示的这个垃圾文本我无法弄清楚从哪里来。

任何人都可以告诉我这里有什么问题吗？

的jsfiddle：http://jsfiddle.net/klebermo/h8Jnv/

Answer 1

您需要对收集的属性，以循环的时候，更准确地说如：

$("#TargetedTable .col").each(function() { 
    var property = $(this).data('property'); 
    atributos.push(property); 
}); 

否则从for (var i = 0; i < atributos.length; i++)循环将尝试从JSON插入不存在的值饲料。