javascript - 将数据从文本文件插入到复杂的表格布局中(HTML、PHP、JS)

Question

我正在构建一个网页，该网页使用相当复杂的表格布局，该布局将容纳大量数据。我不想对所有这些数据进行硬编码，所以我想从文本文件中读取它并以这种方式动态创建网页。下面是我想出的一个例子来说明我想要实现的目标。

// imagine this as the basket that holds all the groceries
<table id=”basket”>

    // this is the label for a new section of the basket (like fruits, or vegetables)
    <thead>Fruits</thead>

        // this is the section of the basket for the items described by the label above
        <tbody>
            <tr>
                <td>

                    // this is the container of these items
                    <table class="category">

                        // a new section of the container for each item
                        <tr>
                            <td>

                                // information about this particular item
                                <table class="Item">
                                    <tr><td>Strawberry</td></tr>
                                    <tr><td>Red</td></tr>
                                    <tr><td>Seeds</td></tr>
                                </table>
                            </td>

                            // verbose description about this item
                            <td>Strawberries are sweet and grow in the summer</td>
                        </tr>

如果我有如下数据:

Fruits
    strawberry, red, seeds, Strawberries are sweet and grow in the summer
    blueberry, blue, seeds, Willy Wonka likes these
    avocado, green, pit, Still not sure how I feel about these
Vegetables
    Celery, green, stalk, A top tier vegetable
    Radish, Red, bulb, I still haven't warmed up to these
    Potato, Brown, root, A classic!

在篮子表下面，我将有两个此代码的实例，一个用于水果，一个用于蔬菜

// this is the label for a new section of the basket (like fruits, or vegetables)
<thead>Fruits</thead>

// this is the section of the basket for the items described by the label above
<tbody>
    <tr>
        <td>

            // this is the container of these items
            <table class="category">

在每个部分中，我都会有所需的多个此代码实例(在本例中，每个实例 3 个，因为列出了 3 种水果和 3 种蔬菜)

        // a new section of the container for each item
        <tr>
            <td>

                // information about this particular item
                <table class="Item">
                    <tr><td>Strawberry</td></tr>
                    <tr><td>Red</td></tr>
                    <tr><td>Seeds</td></tr>
                </table>
            </td>

            // verbose description about this item
            <td>Strawberries are sweet and grow in the summer</td>
        </tr>

所以我的最终问题是，

1. 为了实现这一目标，构建文本文件的最佳方法是什么

和

使用哪种 PHP 或 JavaScript 可以成功读取这个格式正确的文本文件，然后生成我想要的包含正确数据的 HTML

任何建议或见解将不胜感激，谢谢。

Answer 1

好吧，我个人建议将数据保存为 json 格式，这是表示此类数据的一种非常标准的方式。然后，您可以通过 AJAX 提供它或将其保存在文件中并将其包含在脚本标记中。实际上一切都取决于您的要求。

另外，我不知道您的 UI 要求是什么，但我个人不会创建这样的嵌套表。我会使用 div 标签并编写自定义 css 来获得我想要的布局。

// This could be supplied via AJAX or you could save it in a javascript or json file. 
// It really depends on your requirements.

var jsonData = [
  {
    name: "Fruits",
    items: [
      {
        name: "Strawberry",
        color: "red",
        type: "seeds",
        description: "Strawberries are sweet and grow in the summer"
      },
      {
        name: "Blueberry",
        color: "blue",
        type: "seeds",
        description: "Willy Wonka likes these"
      },
      {
        name: "Avocado",
        color: "green",
        type: "pit",
        description: "Still not sure how I feel about these"
      }
    ]
  },
  {
    name: "Vegetables",
    items: [
      {
        name: "Celery",
        color: "green",
        type: "stalk",
        description: "A top tier vegetable"
      },
      {
        name: "Radish",
        color: "red",
        type: "bulb",
        description: "I still haven't warmed up to these"
      },
      {
        name: "Potato",
        color: "brown",
        type: "root",
        description: "A classic!"
      }
    ]
  }
]

// This is the javascript code that would read your json data and build HTML from it

document.getElementById("basket").innerHTML = getBasketHTML(jsonData)

function getBasketHTML(data) {
  // loop through data
  var HTML = ""

  for (var i = 0, i_end = data.length; i < i_end; i++) {
    var category = data[i]

    // add new row and table for each category
    HTML += "<tr><table>"

    // add category label
    HTML += "<thead>" + category.name + "</thead>"

    // add category table
    HTML += "<tbody><tr><td><table class='category'>"

    // loop through category items and build HTML
    for (var j = 0, j_end = category.items.length; j < j_end; j++) {
      HTML += getItemHTML(category.items[j])
    }

    // close category table
    HTML += "</table></td></tr></tbody></table></tr>"
  }

  return HTML
}

function getItemHTML(item) {
  // opening row tag
  var HTML = "<tr>"
  
  // add item information
  HTML += "<td><table class='Item'>"
  HTML += "<tr><td>" + item.name + "</td></tr>"
  HTML += "<tr><td>" + item.color + "</td></tr>"
  HTML += "<tr><td>" + item.type + "</td></tr>"
  HTML += "</table></td>"

  // add verbose description
  HTML += "<td>" + item.description + "</td>"

  // closing row tag
  HTML += "</tr>"

  return HTML
}

<!DOCTYPE html>
  <html>
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
    </head>
    <body>
      <table id="basket"></table>
    </body>
  </html>