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
posted by lightbox at 2015-08-05 15:47 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2014年12月10日


jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル

JavaScript で要素を作成するとなると、createElement で作成する事になりますが、jQuery では直観的に HTML の文字列として作成するサンプルが jQuery の正式ドキュメントのいたるところで見る事ができます。

その際、大きく分けて二種類に分ける事ができますが、その差は親要素に対して実行するか、隣の要素に対して実行するかの違いになります。

.append と .prepend

append は、親要素の子要素として最後に挿入され、prepend は、先頭に挿入されます。さらに、appendToprependTo という、最初に挿入する要素を $("要素記述") で確定しておいて、appendTo( または prependTo )  でセレクタを指定して実行する二通りがあります。

後者のほうが、ソースコード上で作成される内容が最初に来るので意味が解りやすくなると思いますが、処理としては前者のほうが自然に記述できると思います。

.after と .before

afterbefore にも、insertAfterinsertBefore と言う、ペアとなるメソッドがありますが、append 等と違うのは、最初に指定する要素が隣の要素であるところです。しかし、親要素から、find メソッドで子孫全部から取り出したり、children メソッドで子要素だけを対象にする事もできるので、出来上がったコードが解りやすいかどうかの違いでしか現れません。どちらを使ってもいいと思います。

移動について

既存の jQuery のオブジェクト同士で実行すると移動になるので、この場合は一行で書かずに変数を使用して移動の対象と移動先を明確にしたほうが良いでしょう

置き換えについて

使い方のペアとして replaceWithreplaceAll というメソッドがあり、現在の要素の種類そのものを置き換える事ができます。ここでは、TD を TH に置き換えて、TH に対するスタイル設定が有効になるサンプルになっています。
一行目 タイトル

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#tbl {
	border: solid 2px #000000;
	border-collapse: collapse;
	margin-top:10px;
}
#tbl td {
	border: solid 1px #0000ff;
	padding:10px;
}
#tbl th{
	border: solid 1px #0000ff;
	padding:10px;
	background-color: #c0c0c0;
}
</style>
<input type="button" value="処理開始" id="test_start">
<table id="tbl" stryle=''>
<tr>
	<td>一行目</td>
	<td>タイトル</td>
</tr>
</table>

<script>
$("#test_start").click(function(){
	// テーブル内の td の背景色が全て 白 になります
	$( "#tbl" ).find("td").css( "background-color", "#ffffff" );

	// tbody のみが背景色赤になります
	$( "#tbl" ).children().css( "background-color", "red" );

	alert("一番外側の要素(table)の子要素(tr)を追加");
	$( "#tbl" ).append("<tr><td>10</td><td>20</td></tr>");

	alert("一番外側の要素(table)の子要素(tr)を先頭に挿入");
	$( "#tbl" ).prepend("<tr><td>11</td><td>21</td></tr>");

	alert("一行目/タイトルの次に行を挿入");
	$( "#tbl tr" ).eq(1).after("<tr><td>12</td><td>22</td></tr>");

	alert("一行目/タイトルを先頭に移動");
	var target = $( "#tbl tr" ).eq(1);	// タイトル部分
	$( "#tbl tr" ).eq(0).before(target);

	alert("一行目/タイトルを TD から TH に変更");
	$( "#tbl tr" ).eq(0).find("td").each(function(){
		var txt = $(this).text();
		$(this).replaceWith("<th>" + txt + "</th>");
	});
});

</script>


タグ:jquery
posted by lightbox at 2014-12-10 16:22 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2014年07月06日


jQuery の .contents と .children の違い

メソッドとしては、.children に引数としてセレクタが使えますが、.contents との本来の違いは、.contents には、テキストノードが含まれることです。

▼ 英文ドキュメントの記述
The .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.
以下のように DIV を対象にして実行すると、.contents では、文章を取り出す事ができます ※ コードのテスト
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// テキストノードが含まれる
	$( "#text_div1" )
		.contents()
		.each(function(){
			console.log(this);
		});

	// テキストノードが含まれない(HTMLのみ)
	$( "#text_div2" )
		.children()
		.each(function(){
			console.log(this);
		});

});
</script>
<div id="text_div1">
	今は昔、竹取の翁といふ者ありけり。
	<br><br>
	野山にまじりて竹を取りつつ、よろづのことに 使ひけり。
	<br><br>
	名をば、さぬきの造となむいひける。
</div>

<div id="text_div2">
	今は昔、竹取の翁といふ者ありけり。
	<br><br>
	野山にまじりて竹を取りつつ、よろづのことに 使ひけり。
	<br><br>
	名をば、さぬきの造となむいひける。
</div>




タグ:jquery
posted by lightbox at 2014-07-06 22:12 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

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

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