0
私は、複雑なテーブル構造のウェブページを持っています。 >（index.phpを）Dom Traversal Complexテーブルレイアウト
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<?php
// this turns the json object into an array
$json_string = file_get_contents("info.json");
$json = json_decode($json_string, true);
?>
<div id="scroll_box">
<table border="1" cellpadding="10" id="container">
<tr>
<td>
<table class="organizer">
<?php foreach($json as $key => $value): ?>
<!-- this is what needs to be repeated -->
<tr><td class="index"> <?php echo $key ?> </td></tr>
<thead class="sticky" align="center"><tr><th> <?php echo $value["name"] ?></th></tr></thead>
<tbody>
<tr>
<td>
<table class="spell_container">
<?php
foreach ($value["items"] as $key => $value) {
echo '<tr><td><table class="table-bordered spell_shorthand">'.
'<tr><td>Name</td><td class="name">'.$value["name"].'</td></tr>'.
'<tr><td>Type</td><td class="type">'.$value["type"].'</td></tr>'.
'</table>'.
'</td>'.
'<td class="description">'.$value["description"].'</td>'.
'<td><div class="btn-group"><button class="learn">Learn</button></div></td>'.
'</tr>';
}
?>
</table>
</td>
</tr>
</tbody>
<?php endforeach; ?>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(".learn").on('click', function(){
var the_name = $(this).closest("tr").find("table.spell_shorthand").find("td.name").text();
var the_type = $(this).closest("tr").find("table.spell_shorthand").find("td.type").text();
var the_description = $(this).closest("tr").find("td.description").text();
var the_index = $(this).closest("table.organizer").find("td.index").text();
console.log(the_name);
console.log(the_type);
console.log(the_description);
console.log(the_index);
});
</script>
</body>
</html>
と使用されているJSONデータは次のようになります - - 全体のコードはここです>（info.json）今
[
{
"name": "level0",
"items": [
{
"name": "item1",
"type": "type1",
"description": "this is item 1"
},
{
"name": "item2",
"type": "type2",
"description": "this is item 2"
},
{
"name": "item2",
"type": "type2",
"description": "this is item 3"
}
]
},
{
"name": "Level1",
"items": [
{
"name": "item4",
"type": "type4",
"description": "this is item 4"
},
{
"name": "item5",
"type": "type5",
"description": "this is item 5"
}
]
},
{
"name": "Level2",
"items": [
{
"name": "item6",
"type": "type6",
"description": "this is item 6"
}
]
}
]
。 "the_index"を扱うものを除いて、jsスクリプトのすべてのconsole.logステートメントは完全に機能します...何らかの理由で、本当に必要なときにインデックス（0,1,2）のすべてのインスタンスを返していますクリックされたボタンの親であるヘッダのインデックスを返すだけです。
私はあなたにこれらの2つのファイルを取って、私が何を話しているのか見てみることをお勧めします。
最初のインデックス（0）の下にあるボタンをクリックすると（0 1 2）が返される理由については、ご理解いただきありがとうございます。
私が推測するのは、最も近いtd.indexを取得しているということです。ループのマスター行（親）のインデックスを作成することを検討しましたか？ボタンにデータ属性を追加することができます。 onclickあなたはあなたのマスター行のIDとかなり簡単にそこに何も問題にアクセスすることはできませんデータ属性を取得します。 – Adrianopolis
私はそれを行う方法がわかりません – laroy