jQuery で TABLE の 行内の 一つのTD をクリック。その後、他の TD 内のテキストを取得する / nextAll と prevAll

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
001.<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
002.<script>
003.$(function() {
004. 
005.        // 名称のリンクに設定したクラスでイベント作成
006.        // ※ 各 td のクラスで取得
007.        $(".check").on("click", function(){
008.                $("#cd").val($(this).prevAll(".t0").text());
009.                $("#name").val($(this).text());
010.                $("#kin").val($(this).nextAll(".t1").text());
011.                $("#bdate").val($(this).nextAll(".t2").text());
012.                $("#tanto").val($(this).nextAll(".t3").text());
013.                $("#co").val($(this).nextAll(".t4").text());
014.        });
015. 
016.        // 購入日のリンクに設定したクラスでイベント作成
017.        // ※ 各 td の順序で取得
018.        $(".t2").on("click", function(){
019.                $("#cd").val($(this).prevAll().eq(2).text());
020.                $("#name").val($(this).prevAll().eq(1).text());
021.                $("#kin").val($(this).prevAll().eq(0).text());
022.                $("#bdate").val($(this).text());
023.                $("#tanto").val($(this).nextAll().eq(0).text());
024.                $("#co").val($(this).nextAll().eq(1).text());
025.        });
026. 
027.});
028. 
029.</script>
030.<style type="text/css">
031..check, .t2 {
032.        text-decoration: underline;
033.        cursor: pointer;
034.        color: blue;
035.}
036.#target_area th, #target_area td {
037.        padding: 5px;
038.}
039.#target_area input {
040.        width:120px;
041.        font-size: 18px;
042.}
043.#target_area table {
044.        margin-top: 10px;
045.        border-collapse: collapse;
046.        border: solid #000000 1px;
047.        background-color: #ffffff;
048.}
049.#target_area th {
050.        border: solid #000000 1px;
051.        background-color: silver;
052.}
053.#target_area td {
054.        border: solid #000000 1px;
055.}
056.</style>
057.<div id="target_area">
058.<p><input id="cd"> <input id="name"> <input id="kin"></p>
059.<p><input id="bdate"> <input id="tanto"> <input id="co"></p>
060.<table>
061.        <tbody>
062.        <tr>
063.                <th>コード</th>
064.                <th>名称</th>
065.                <th>金額</th>
066.                <th>購入日</th>
067.                <th>担当者</th>
068.                <th>発注先</th>
069.        </tr>
070.        <tr>
071.                <td class="t0">0002</td>
072.                <td class="check">問題集 002</td>
073.                <td class="t1">4000</td>
074.                <td class="t2">2015/08/24</td>
075.                <td class="t3">田中</td>
076.                <td class="t4">発注先002</td>
077.        </tr>
078.        <tr>
079.                <td class="t0">0003</td>
080.                <td class="check">問題集 003</td>
081.                <td class="t1">3000</td>
082.                <td class="t2">2015/08/23</td>
083.                <td class="t3">山田</td>
084.                <td class="t4">発注先003</td>
085.        </tr>
086.        <tr>
087.                <td class="t0">0004</td>
088.                <td class="check">問題集 004</td>
089.                <td class="t1">2000</td>
090.                <td class="t2">2015/08/22</td>
091.                <td class="t3">山田</td>
092.                <td class="t4">発注先004</td>
093.        </tr>
094.        <tr>
095.                <td class="t0">0001</td>
096.                <td class="check">問題集 001</td>
097.                <td class="t1">1000</td>
098.                <td class="t2">2015/08/21</td>
099.                <td class="t3">田中</td>
100.                <td class="t4">発注先001</td>
101.        </tr>
102.        </tbody>
103.</table>
104.</div>