Question

首先，对于任何相当随意或完全愚蠢的编码禁忌而言道歉。因为这是第一次尝试为我做这样的事情。所以我在飞行中学习。

我试图使用JQuery。 $ .each（）遍历使用Ajax调用返回的JSON对象，以构建搜索结果表。

根据用户输入的搜索类型，结果以及表格将具有不同数量的字段。以下示例仅包含3个字段，而其他搜索可以包含8个字段。

我的服务器端脚本为一种搜索类型返回的JSON对象的示例结构如下：

{"header": 
    {"0": "DRAWING_ID", "1": "FILENAME", "2": "LAST UPDATED"}, 
"results": 
    {"1": {"DRAWING_ID": "15682", "LAST UPDATED": "2015-02-27 10:50:47", "FILENAME": "10-22-2008-K_Shared Sports Analysis Tools"}, 
     "2": {"DRAWING_ID": "7162", "LAST UPDATED": "2015-02-10 07:42:55", "FILENAME": "10-22-2001-BT_Salt And Pepper"}, 
     "3": {"DRAWING_ID": "20429", "LAST UPDATED": "2015-01-26 11:19:40", "FILENAME": "10-22-2006-G_Public Area Fibre"}, 
     "4": {"DRAWING_ID": "7163", "LAST UPDATED": "2014-12-01 23:20:57", "FILENAME": "10-22-2003-AL_Ref Dist"}, 
     "5": {"DRAWING_ID": "17265", "LAST UPDATED": "2013-11-11 16:07:56", "FILENAME": "10-22-2009-B_ Shared Area Monitor"}}}

我选择将标题和字段分开，然后使用标题中的值作为结果的键。

使用JQuery我已成功使用<th>为标题绘制HTML表$.each()元素。然而，结果却无法得到相同的结果。

drawTable()部分<th>的代码段如下：

function drawTable( data ) {
    $("#resultsTable").empty();
    $("#resultsTable").append(function(){
          $.each(data.header, function(index, element) {
            console.log(index,element)
            $("#resultsTable").append($("<th>").text(data.header[index]));
          });
        }).wrapInner("<tr></tr>");

每次这个drawTable函数被Ajax回调调用时，它会清空最后一个表并重绘。以上结果是：

<table class="table table-hover table-condensed" id="resultsTable">
    <tr><th>DRAWING_ID</th><th>FILENAME</th><th>LAST UPDATED</th></tr>
</table>

结果数据给了我最大的问题，我无法解决如何修复问题。处理表格剩余行的drawTable()的最后一个片段如下：

$.each(data.results, function(index, element) {
            console.log(element)
            $("#resultsTable").append($("<tr>").text(function(){
                $.each(element, function(index2, element2) {
                    console.log(element2)
                    $("<td>").text(element2);
                })
            }));
        });

导致一堆空行：

<tbody>
    <tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
</tbody>

我以稍微不同的方式尝试了这一点，这导致单行上的所有<td>个单元格。但我似乎无法将它们包含在每个<tr></tr>行中。

实际上，我已经能够通过直接索引需要附加到表格的每个单元格然后将整个批次包装在<tr></tr>中来成功绘制类似的表格。像这样：

$.each(data.design.results, function(index, element) {
          $("#resultsTable").append($("<tr>").append(
          console.log(data.design.results[index]),
          $("<td>").text(data.design.results[index].LOCATION),
          $("<td>").text(data.design.results[index].SYSN),
          $("<td>").text(data.design.results[index].MODEL),
          $("<td>").text(data.design.results[index].FUNCTION)).attr('onclick', 'cardDetails("'+ data.design.results[index].SYSN +'")'))
        });

但是在这个单独的实例中，结果会在字段数量上有所不同，我不能认为这是最好的方法。我认为我最困难的是首先使用嵌套的$.each()元素。

对此的任何帮助将不胜感激。

谢谢大家。

Answer 1

也许您可以将标题字段保存在单独的var中，并根据它构建行？ E.g：

function drawTable( data ) {
    $("#resultsTable").empty();
    var fieldMapping = {};
    $("#resultsTable").append(function(){
      $.each(data.header, function(index, element) {
        $("#resultsTable").append($("<th>").text(data.header[index]));
          fieldMapping[data.header[index]]=index;
      });
    }).wrapInner("<tr></tr>");

    $.each(data.results, function(index, element) {
            var tr=$('<tr/>');
            for(key in fieldMapping)
                tr.append('<td>'+element[key]+'</td>');
            $("#resultsTable").append(tr);
        });
}

小提琴演示：http://jsfiddle.net/1uz3w6ou/

使用JQuery从具有不同数量的字段的JSON对象构建表

1 个答案: