SQLの窓

2015年08月05日


jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する

nextAll は、起点となる要素から下方向に存在する同じ階層の要素を全て取得します。引数にセレクタが指定できるので、ここでは TD にクラスを設定して目的の要素を特定していますが、特定する要素の属性が無い場合は、$(this).nextAll().eq(0).text() のようにして eq(順序番号) を指定して特定できます。

コード 名称 金額 購入日 担当者 発注先
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="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {

	$(".check").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());
	});

});

</script>
<style type="text/css">
.check {
	text-decoration: underline;
	cursor: pointer;
	color: blue;
	width: 100px;
}
#lboxtable input {
	width:100px;
}
#lboxtable table {
	margin-top: 10px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
}
#lboxtable th {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
}
#lboxtable .header {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
}
</style>
<div id="lboxtable">
<input id="cd">
<input id="name">
<input id="kin">
<br>
<input id="bdate">
<input id="tanto">
<input id="co">
<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>
</div>



タグ:jquery
【メソッド:jQueryの最新記事】
posted by lightbox at 2015-08-05 15:47 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり