Javascript 将数据从文本文件插入到复杂的表格布局（HTML、PHP、JS）

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

// 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>

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

// 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种蔬菜）

//每个项目的容器的新部分
//有关此特定项目的信息
草莓的
红色
种子
//关于此项目的详细说明
草莓是甜的，在夏天生长

所以我的最终问题是

为了实现这一点，我构造文本文件的最佳方式是什么

及

我可以用什么样的PHP或JavaScript成功地读取这个格式正确的文本文件，然后生成包含正确数据的HTML

---

如果您有任何建议或见解，我们将不胜感激。

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

另外，我不知道您的UI需求是什么，但我个人不会创建这样的嵌套表。我会使用

div

标记并编写自定义css来获得我想要的布局

//这可以通过AJAX提供，也可以保存在javascript或json文件中。
//这取决于你的要求。
var jsonData=[
{
名称：“水果”，
项目：[
{
名称：“草莓”，
颜色：“红色”，
类型：“种子”，
描述：“草莓是甜的，在夏天生长”
},
{
名称：“蓝莓”，
颜色：“蓝色”，
类型：“种子”，
描述：“威利·旺卡喜欢这些”
},
{
名称：“鳄梨”，
颜色：“绿色”，
类型：“坑”，
描述：“仍然不确定我对这些的感觉”
}
]
},
{
名称：“蔬菜”，
项目：[
{
名称：“芹菜”，
颜色：“绿色”，
类型：“茎”，
描述：“顶级蔬菜”
},
{
名称：“萝卜”，
颜色：“红色”，
类型：“灯泡”，
描述：“我还没有适应这些”
},
{
名称：“土豆”，
颜色：“棕色”，
类型：“根”，
描述：“经典！”
}
]
}
]
//这是读取json数据并从中构建HTML的javascript代码
document.getElementById（“basket”）.innerHTML=getBasketHTML（jsonData）
函数getBasketHTML（数据）{
//循环浏览数据
var HTML=“”
对于（变量i=0，i_end=data.length；i

这是一个很好的答案，谢谢您。我知道如何将其保存到一个文件中，然后将其包含在脚本标记中，但如何使用AJAX实现这一点（我没有太多的经验）？如果您发现答案有用，如果您将其标记为解决方案，我将不胜感激。在我深入研究AJAX之前，您对它有什么背景知识吗？如果不是的话，我这里有一些链接可以阅读更多关于它的内容：和。我对它代表什么以及它的几种使用方法有基本的了解，但我从未真正实现过它。我不是AJAX专家，但我可以用javascript帮助您向服务器发出请求。我不能在后端部分帮助您，因为我不是PHP背景。尽管AJAX可能比它的价值更麻烦，但这取决于您正在构建的内容。你是在建立一个静态网站还是一个从数据库中读取数据的网站？我只是把文本文件当作“数据库”来使用

// 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>