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
|
|
【メソッド:jQueryの最新記事】
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
