从JSON创建动态响应的htmltable

时间:2017-07-08 17:59:04

标签: javascript jquery html json html-table

output of code

我试图从 Json对象动态创建表。但是表格无法以适当的格式创建。

REG ADD 'HKLM\SOFTWARE\Microsoft\Microsoft Antimalware\Exclusions\Paths' /v 'C:\MyFolderwithNoSpaces' /t REG_DWORD /d 0 /f/c

依此类推,我采用相同的格式,从服务器获取 Json ,但是我必须只显示"解决方案"在 JSON

我写的剧本

[
  {
    "name" : "water",
    "solutions" : [ 
      {
        "cost" : "200-300 INR",
        "difficulty" : [1,0,0,0,0],
        "image" : "Cover.png",
        "message" : "Save 40% of water being released from your taps",
        "title" : "Optimise!",
        "description" : " flow.",
        "data" : [
          {
            "step" : 1,
            "content" : [
              {
                "message" : "Collect the following materials.",
                "image" : "0.JPG"
              },
              {
                "alert" : "Measure your tap diameter ",
                "image" : "1.JPG"
              }
            ] 
          },
          {
            "step" : 2,
            "content" : [
              {
                "message" : " hand",
                "image" : "2.JPG"
              },
              {
                "image" : "3.JPG"
              }
            ]
          },
          {
            "step" : 3,
            "content" : [
              {
                "message" : " deposits",
                "image" : "/4.JPG"
              }
            ] 
          },
          {
            "step" : 4,
            "content" : [
              {
                "message" : "tap!",
                "image" : "5.JPG"
              },
              {
                "image" : "6.JPG"
              },
              {
                "image" : "7.JPG"
              },
              {
                "image" : "8.JPG"
              },
              {
                "alert": " tap."
              }
            ] 
          }
        ]
      },

必须以表格形式显示所有数据的格式为......

每个解决方案都有一行(标题,消息,描述,......,数据)。具有其他描述性数据(步骤)的该行中的数据列可以具有多行。您可以在一行中合并多行。点击数据单元格必须显示所有信息。

如何执行此操作?

1 个答案:

答案 0 :(得分:0)

尝试这样的事情:

function loadDoc() {
    $.getJSON("/solutions" + , function(result, status, jqXHR) {
    var myList = (jqXHR.responseText);
    myList = JSON.parse(myList);
    var columns =[];
    columns = addAllColumnHeaders(myList);
    var table = document.getElementById("excelDataTable");
    var body = table.createTBody();
    for (var i = 0; i < myList.length; i++) {
        var row = body.insertRow();
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
          var cellValue = myList[i][columns[colIndex]];
          if (cellValue == null) cellValue = "";
          var cell = row.insertCell();
          if (columns[colIndex] == 'name') {
              cell.innerHTML = cellValue;
          }
          else if (columns[colIndex] == 'solutions') {
              var contents = '';
              for (x in cellValue) {
                  contents += '<div><span>' + x + '</span><span>' + cellValue[x] + '</span></div>'; 
              }
              cell.innerHTML = contents;
          }
        }
      }
    };
} 

这将一直有效,直到你进入数据属性,然后你将不得不做另一个for循环。