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ファイルを、すべてのデータが含まれている1に接続されている - 今、私はこのようになり、ユーザーが利用できるすべてのデータが含まれていますページを持っていますこのような形式で - >
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はそれに応じてそれはこのようになります作成1 - >
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インデックスを参照して、別のファイルのdata0やdata1セクションにデータのクラスタを作成し、各ボタンに固有のIDを追加するjカウンタ変数を使用することができることを考えています。 AJAXを使ってこれを行う方法はありますか？または多分いくつかのPHP？アドバイスをいただければ幸いです。ありがとうございます。