Question

我现在正在创建一个网站，它利用非常复杂的表结构和文本文件作为数据库。现在我有一个页面，其中包含用户可用的所有数据，如下所示 - ＆gt;

all_data

<html>
    <head>
        <!-- custom css -->
        <link rel="stylesheet" type="text/css" href="tables.css">
        <!-- bootstrap CDN -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <!-- where all the data is stored -->
            <script type="text/javascript" src="data.js"></script>
            <!-- where the functions that fill the table are stored -->
            <script type="text/javascript" src="index.js"></script>

    </head>
    <body>
        <ul id="nav_bar">
            <li><a href="prepared_data.html">PREPARED</a></li>
            <li><a href="known_data.html">KNOWN</a></li>
            <li><a href="all_data.html">ALL</a></li>
            <li><a href="guide.html">GUIDE</a></li>
        </ul>
        <div id="scroll_box">
            <table id="container">

                <!-- this will access index.js and utilize the functions in there -->
                <script type="text/javascript">
                    document.getElementById("container").innerHTML = getDataSections(all_data);
                </script>
            </table>
        </div>
    </body>
</html>

这是连接到两个JS文件，其中一个包含这种格式的所有数据 - ＆gt;

var all_data = [
  {
    name: "data0",
    items : [
      {
        name: "bernard",
        job: "accountant",
        description: "a nice family man"
      },
      {
        name: "susan",
        job: "developer",
        description: "a genius"
      }
    ]
  },
  {
    name: "data1",
    items : [
      {
        name: "David",
        job: "Boss",
        description: "loves corn on the cob"
      },
      {
        name: "Erica",
        job: "CEO",
        description: "classified"
      }
    ]
  }
]

和一个获取此数据并相应地创建HTML的方法 - ＆gt;

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

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

    // only make a section if there are any data there
    if (category.items.length > 0) {

      // adds the section title
      HTML += '<thead class="sticky" align="center"><tr><th>' + category.name + '</th></tr></thead>'
      // add category label
      HTML += "<tbody><tr><td><table class='data_container'>"

      // loop through category items and build HTML
      // go to getDataInfo, run that, then proceed
      for (var j = 0, j_end = category.items.length; j < j_end; j++) {
        HTML += getDataInfo(category.items[j])
      }

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

  return HTML
}



function getDataInfo(item) {
  // opening row tag
  var HTML = "<tr>"

  // add item information
  HTML += "<td><table class='table-bordered Data_shorthand'>"
  HTML += "<tr><td>Name</td><td>" + item.name + "</td></tr>"
  HTML += "<tr><td>Job</td><td>" + item.job + "</td></tr>"
  HTML += "</table></td>"

  // add description
  HTML += "<td class='description'>" + item.description + "</td>"
  HTML += "<td><div class='btn-group'><button class='add'>Add</button></div></td>"
  // closing row tag
  HTML += "</tr>"

  return HTML
}

所有人都说。我想为每个“添加”按钮添加一个EventActionListener，这样当它们被单击时，它们会获取特定于其行的信息，并将其添加到类似于上面显示的文件中，但是为要添加到列表的人指定。这样，我可以使用相同的方法，并相应地加载该页面。

我想我可以使用j计数器变量为引用文件的J索引的每个按钮添加唯一ID，然后将该数据簇写入另一个文件{ {1}}或data0部分。有没有办法让我用AJAX做到这一点？或者也许是一些PHP？任何建议将不胜感激，谢谢。

Answer 1

为什么要提前创建html页面？您可以创建每种类型的一个页面并使用动态给出的数据。这样，您就不需要在文件中搜索某些页面或数据，只与数据库通信以获取每个操作的数据。

使用AJAX或PHP将数据写入文本文件中的特定位置

1 个答案: