Question

我有一个JSON文件

{
  "Scenario"    : "ModelNameHere",
  "id"          : "1",
  "description" : "Description of table model goes here",
  "headers"     : {
     "Column 1 header" : {
       "order"      : 1,
       "items"      : {
         "Row 1 Col 1 value" : {
           "id"         : 1,
           "comment"    : "Comment on Row 1 Col 1",
           "order"      : 1
         },
         "Row 2 Col 2 value" : {
           "id"         : 2,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     },
     "Column 2 header" : {
       "order"      : 2,
       "items"      : {
         "Row 1 Col 2 value" : {
           "id"         : 3,
           "comment"    : "Comment on Row 1 Col 2",
           "order"      : 1
         },
             "Row 2 Col 2 value" : {
           "id"         : 4,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     }
  }
}

我想使用jQuery将JSON数据放入HTML表格。

标题应该放在TH td项目内，标题内的项目应该是每个相关行的TD中的元素。

JS或jQuery中是否有一个函数用JSON数据填充表？

我如何循环并将JSON元素与表元素匹配？

感谢。

Answer 1

不，没有这样的功能，因为它是一个真正的情境特定功能。

虽然写起来很容易您可以将JSON作为普通的JS对象访问这意味着您可以循环使用它并将信息放在正确的位置。

Answer 2

This question探索各种模板引擎，它可以帮助您实现您想要实现的目标。您仍然需要为表定义模板，但填充它将非常容易。

Answer 3

看看这个插件。有很多jQuery插件，所以选择一个适合你的插件。 http://www.datatables.net 这是来自json的示例，除了它是从txt文件加载，但这不是问题。 http://www.datatables.net/examples/data_sources/ajax.html

这就是我建议你重组你的json的方法。在我的诚实意见中，你应该根据表而不是对象来思考。

{
    "model" : "Model name here",
    "id" : 1,
    "description" : "Description of table model goes here",
    "headers" : {
        "header" : {
            "id" : 1,
            "order" : 1,
            "name" : "Col 1 header name" 
        },
        "header" : {
            "id" : 2,
            "order" : 3,
            "name" : "Col 2 header name" 
        } 
    },
    "row1" : {
        "item" : {
            "id" : 1,
            "name" : "Some td data comes here" 
        },
        "item2" : {
                "id" : 4,
            "name" : "Some td data comes here" 
        } 
    },
    "row2" : {
        "item" : {
            "id" : 2,
            "name" : "Some td data comes here" 
        },
        "item2" : {
            "id" : 3,
            "name" : "Some td data comes here" 
        } 
    } 
}

Answer 4

如果你在PHP中做，那么使用json_decode('jsonstring',true); 它将作为数组并轻松操作数组以创建html

来自json的jQuery +表创建

4 个答案: