0
我正在創建一個網站，該網站利用非常複雜的表格結構和文本文件作爲數據庫。現在我有一個頁面，將包含所有提供給用戶的數據，它看起來像這樣 - >使用AJAX或PHP將數據寫入文本文件中的特定位置
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文件，一個包含所有數據在這樣的格式 - >
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看起來像這樣 - >
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計數器變量爲一個唯一的ID添加到每個引用J索引文件的按鈕，然後將數據寫入到另一個文件的data0或data1節集羣。有沒有辦法讓我使用AJAX做到這一點？或者也許一些PHP？任何意見將不勝感激，謝謝。