当前位置: 首页 > 面试题库 >

将json数据转换为html表

燕经国
2023-03-14
问题内容

是否有任何jQuery或javascript库根据给定的json数据生成动态表?我不想定义列,该库应该读取json哈希中的键并生成列。

当然,我可以自己遍历json数据并生成html表。我只想知道是否存在可以简单重用的此类库。


问题答案:

感谢大家的答复,这使用jQuery。

程式码片段:

var myList = [

  { "name": "abc", "age": 50 },

  { "age": "25", "hobby": "swimming" },

  { "name": "xyz", "hobby": "programming" }

];



// Builds the HTML Table out of myList.

function buildHtmlTable(selector) {

  var columns = addAllColumnHeaders(myList, selector);



  for (var i = 0; i < myList.length; i++) {

    var row$ = $('<tr/>');

    for (var colIndex = 0; colIndex < columns.length; colIndex++) {

      var cellValue = myList[i][columns[colIndex]];

      if (cellValue == null) cellValue = "";

      row$.append($('<td/>').html(cellValue));

    }

    $(selector).append(row$);

  }

}



// Adds a header row to the table and returns the set of columns.

// Need to do union of keys from all records as some records may not contain

// all records.

function addAllColumnHeaders(myList, selector) {

  var columnSet = [];

  var headerTr$ = $('<tr/>');



  for (var i = 0; i < myList.length; i++) {

    var rowHash = myList[i];

    for (var key in rowHash) {

      if ($.inArray(key, columnSet) == -1) {

        columnSet.push(key);

        headerTr$.append($('<th/>').html(key));

      }

    }

  }

  $(selector).append(headerTr$);



  return columnSet;

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<body onLoad="buildHtmlTable('#excelDataTable')">

  <table id="excelDataTable" border="1">

  </table>

</body>


 类似资料:
  • 有没有jQuery或javascript库生成给定json数据的动态表?我不想定义列,库应该读取json散列中的键并生成列。 当然,我可以自己遍历json数据并生成html表。我只是想知道是否有这样的库存在,我可以简单地重复使用。

  • 问题内容: 我正在尝试将通过BeautifulSoup提取的表转换为JSON。 到目前为止,尽管我不确定如何从此处处理数据,但我设法隔离了所有行。任何建议将不胜感激。 (为了方便阅读,换行了) 这是我的尝试: 这给了我以下结果: 问题答案: 您的数据可能类似于: 我们可以使用以下代码从中以列表的形式获得您的结果: 要将结果转换为JSON(如果您不关心顺序): 结果: 如果您需要相同的订单,请使用以

  • 我在HTML和CSS方面有一些丰富的经验,但在JS和Jquery方面的经验不多,我希望将JSON数据(在我的例子中是文本和图像)放入HTML表中,但经过几天的研究,似乎没有任何工作对我来说,这是JSON数据。 到目前为止,我尝试了很多不同的代码,但似乎都没有工作,因为1)我不知道如何在“team 1”和“team 2”字段中选择字段“name”;2)我不知道是否可以将团队的图像放在团队名称附近。希

  • 问题内容: 我正在尝试将HTML表中存在的数据转换为JSON,以便可以在服务器端进行相应的处理。我可以序列化数据,但是结果充其量只能生成不直接链接的独特数据数组。像:这是我正在使用的形式: 序列化数据的脚本是: 经过数页StackOverFlow之后,我得到了serializeFormJSON(): 通过使用所有这些,我可以得到像这样的JSON: 我尝试了多种方法以名称-性别格式获取它们,但是每种

  • 我有很多HTML表,我正在尝试将其转换为json格式,但我的代码只适用于第一个水平表(第一个图像),而不是第二个垂直表(第二个图像)... 我在这里附上了我的代码和示例表 到目前为止我尝试的代码 以上HTML表的输出: 表2的HTML代码 null 如果表是水平表(表1),那么旧的输出就足够了 如果表是一个垂直表(表2),那么输出应该如下所示: 我试过修改代码,但对我没有任何建议???

  • 问题内容: 有谁知道如何将HTML值表转换为漂亮的JSON对象以使用jQuery进行操作? 问题答案: HTML表格?就像二维数组中的所有内容一样? 然后只需使用$ .json(或您想要的任何库)将其转换为JSON字符串即可。 编辑 —重新编写以使用数组原型中的本机(此处为shim): jQuery 函数具有将返回的数组展平为结果数组的“功能”。也就是说,如果回调函数返回的值本身就是一个数组,则不