nextAll は、起点となる要素から下方向に存在する同じ階層の要素を全て取得します。引数にセレクタが指定できるので、ここでは TD にクラスを設定して目的の要素を特定しています。
特定する要素の属性が無い場合は、$(this).nextAll().eq(0).text() のようにして eq(順序番号) を指定して特定できます。但し、prevAll では近い要素から順序番号が小さくなるので注意して下さい。
| コード | 名称 | 金額 | 購入日 | 担当者 | 発注先 |
|---|---|---|---|---|---|
| 0002 | 問題集 002 | 4000 | 2015/08/24 | 田中 | 発注先002 |
| 0003 | 問題集 003 | 3000 | 2015/08/23 | 山田 | 発注先003 |
| 0004 | 問題集 004 | 2000 | 2015/08/22 | 山田 | 発注先004 |
| 0001 | 問題集 001 | 1000 | 2015/08/21 | 田中 | 発注先001 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
// 名称のリンクに設定したクラスでイベント作成
// ※ 各 td のクラスで取得
$(".check").on("click", function(){
$("#cd").val($(this).prevAll(".t0").text());
$("#name").val($(this).text());
$("#kin").val($(this).nextAll(".t1").text());
$("#bdate").val($(this).nextAll(".t2").text());
$("#tanto").val($(this).nextAll(".t3").text());
$("#co").val($(this).nextAll(".t4").text());
});
// 購入日のリンクに設定したクラスでイベント作成
// ※ 各 td の順序で取得
$(".t2").on("click", function(){
$("#cd").val($(this).prevAll().eq(2).text());
$("#name").val($(this).prevAll().eq(1).text());
$("#kin").val($(this).prevAll().eq(0).text());
$("#bdate").val($(this).text());
$("#tanto").val($(this).nextAll().eq(0).text());
$("#co").val($(this).nextAll().eq(1).text());
});
});
</script>
<style type="text/css">
.check, .t2 {
text-decoration: underline;
cursor: pointer;
color: blue;
}
#target_area th, #target_area td {
padding: 5px;
}
#target_area input {
width:120px;
font-size: 18px;
}
#target_area table {
margin-top: 10px;
border-collapse: collapse;
border: solid #000000 1px;
background-color: #ffffff;
}
#target_area th {
border: solid #000000 1px;
background-color: silver;
}
#target_area td {
border: solid #000000 1px;
}
</style>
<div id="target_area">
<table>
<tbody>
<tr>
<th>コード</th>
<th>名称</th>
<th>金額</th>
<th>購入日</th>
<th>担当者</th>
<th>発注先</th>
</tr>
<tr>
<td class="t0">0002</td>
<td class="check">問題集 002</td>
<td class="t1">4000</td>
<td class="t2">2015/08/24</td>
<td class="t3">田中</td>
<td class="t4">発注先002</td>
</tr>
<tr>
<td class="t0">0003</td>
<td class="check">問題集 003</td>
<td class="t1">3000</td>
<td class="t2">2015/08/23</td>
<td class="t3">山田</td>
<td class="t4">発注先003</td>
</tr>
<tr>
<td class="t0">0004</td>
<td class="check">問題集 004</td>
<td class="t1">2000</td>
<td class="t2">2015/08/22</td>
<td class="t3">山田</td>
<td class="t4">発注先004</td>
</tr>
<tr>
<td class="t0">0001</td>
<td class="check">問題集 001</td>
<td class="t1">1000</td>
<td class="t2">2015/08/21</td>
<td class="t3">田中</td>
<td class="t4">発注先001</td>
</tr>
</tbody>
</table>
<p><input id="cd"> <input id="name"> <input id="kin"> <input id="bdate"> <input id="tanto"> <input id="co"></p>
</div>
タグ：jquery
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
