SQLの窓

2019年02月18日


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

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
posted by lightbox at 2019-02-18 12:02 | メソッド: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 | このブログの読者になる | 更新情報をチェックする

2014年07月05日


jQuery の .children で、直近の子要素のみを選択して処理する

一般的には、セレクタを使って、ある特定の要素の中の全ての特定要素を取得できますが、要素内の次のレベルのみ取得したい場合は、.childlen を使用して、引数にセレクタを渡します。以下の例では、一番上のボックスがなにもしない状態で、2番目のボックスで jQuery の最初のセレクタで level-2 内の全ての li 要素を取得しています。

そして、3番目のボックスで次のレベルにある li 要素だけを取り出しています。

※ 最初の検索は、$( "#levelTarget1 .level-2" ).find("li") でも可能です
  • I
  • II
    • A
      • 1
      • 2
      • 3
      1. 1
      2. 2
      3. 3
    • B
  • III
  • I
  • II
    • A
      • 1
      • 2
      • 3
      1. 1
      2. 2
      3. 3
    • B
  • III
  • I
  • II
    • A
      • 1
      • 2
      • 3
      1. 1
      2. 2
      3. 3
    • B
  • III

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

$( "#levelTarget1 .level-2 li" )
	.css( {
		"background-color": "pink",
		"width": "300px",
		"padding": "10px",
		"border": "1px solid #123456",
		"border-radius": "5px"
	});

$( "#levelTarget2 .level-2" )
	.children("li")
	.css( {
		"background-color": "pink",
		"width": "300px",
		"padding": "10px",
		"border": "1px solid #123456",
		"border-radius": "5px"
	});

});
</script>
<style>
.level-1 {
	width:450px;
	border: 1px solid #c0c0c0;
	padding: 10px 0 10px 30px;
	border-radius: 10px;
	box-shadow: 0 15px 30px -15px;
}
</style>
<ul class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>
<ul id="levelTarget1" class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>
<ul id="levelTarget2" class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>



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

2014年07月04日


jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う

この方法では、任意の集合に対して複数の条件を OR で処理を行う事が想定されます。
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6
.filter()

この .filter 例は、最も良く使う方法としての、セレクタでの選択例です。.filter は、対象となる jQuery オブジェクト集合の中で、さらに選択範囲を狭くするという機能です。その機能に対応して、.end によって filter の範囲選択を解除して元の jQuery オブジェクト集合 に戻します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	$( "#listitems li" )
		// **********************************
		// まず偶数だけを対象にします
		// **********************************
		.filter( ":even" )
		.css({ 
			"background-color": "#123456",
			"color": "#aaaaaa",
			"padding": "10px",
			"width": "300px"
		})

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 再度全体から奇数を対象にします
		// **********************************
		.filter( ":odd" )
		.css({ 
			"padding": "10px",
			"width": "300px"
		})
		.text("OK")

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 全てに対して、輪郭線と角丸を設定
		// **********************************
		.css({ 
			"border": "solid 1px #c0c0c0",
			"border-radius": "8px"
		})


});

</script>
<ul id="listitems">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

jQuery のドキュメントでは、function を使用した例が多く掲載されています。function の中で条件を設定して、対象ならは true を return するように書かれています。これはすぐ理解できますが、DOM のリストと jQuery のオブジェクトを引数とした場合は少し解りづらいので以下のように具体例を作成しました。

elements とは、その意味の通りではありますが、ここでは配列として動作を確認しました。jQuery はそのままの意味で、セレクタで選択されたものが対象となりますが、セレクタを使うのであれば最初が filter の引数にすれば良いので、既に変数として存在するか、関数内で引数で渡されている事を想定すればいいと思います。
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	$( "#listitems2 li" )
		// **********************************
		// まず DOM で選択
		// **********************************
		.filter( [document.getElementById("d1"), document.getElementById("d2")] )
		.css({ 
			"background-color": "#123456",
			"color": "#aaaaaa",
			"padding": "10px",
			"width": "300px"
		})

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 再度全体から jQuery で選択
		// **********************************
		.filter( $("[id*=j]") )
		.css({ 
			"padding": "10px",
			"width": "300px"
		})
		.text("OK")

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 全てに対して、輪郭線と角丸を設定
		// **********************************
		.css({ 
			"border": "solid 1px #c0c0c0",
			"border-radius": "8px"
		})


});

</script>
<ul id="listitems2">
  <li id="jquery1">list item 1</li>
  <li id="d1">list item 2</li>
  <li id="jquery2">list item 3</li>
  <li id="jquery3">list item 4</li>
  <li id="d2">list item 5</li>
  <li id="jquery4">list item 6</li>
</ul>


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

jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")








要素(エレメント)を動的に作成するのは、DOM では document.createElement です。もちろんそれでも使えますが、jQuery では至極簡単に $("要素の記述") で作成されます。作成されただけでは画面に所属しないので( 表示されない )、.appendTo( 既に存在する要素 ) として親要素の1番目の要素として登録します。

その後は、必要な属性・値・CSS・イベント・前後の補正を追加して完成させます。
	// ************************************
	// a 要素を作成して、
	// anchorContent の子要素として追加する
	// ************************************
	$("<a></a>").appendTo( $("#anchorContent") )

		// ************************************
		// 属性として id と href と target の値をセット
		// ************************************
		.attr({
			"id": "anchorContent1",
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})

		// ************************************
		// テキストノードとしての値をセット
		// ************************************
		.text("Google")

		// ************************************
		// 表示関連の属性をセット
		// ************************************
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"text-decoration": "none",
			"color": "navy"
		})

		// ************************************
		// イベントをセット
		// ************************************
		.click(function(){
			console.log("アンカーがクリックされました");
		});


二つ目以降は、最初のアンカーに対して、.insertAfter する事によって繋いで行きます。ここでは、親要素が PRE なので、二つ目以降は改行する為に最後に .before("\n\n") を追加しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function(){

	// 通常リンク
	$("<a></a>").appendTo( $("#anchorContent") )
		.attr({
			"id": "anchorContent1",
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})
		.text("Google")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"text-decoration": "none",
			"color": "navy"
		})
		.click(function(){
			console.log("アンカーがクリックされました");
		});
	

	// ボタンがわり
	$("<a></a>").insertAfter($("#anchorContent1"))
		.attr({
			"id": "anchorContent2",
			"href": "#"
		})
		.text("ボタンのかわり")
		.css({
			"font-size": "20px",
			"font-weight": "bold"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました1");

			window.open("https://translate.google.co.jp/?hl=ja&tab=iT");

			// クリックする事によって起こる # の機能をキャンセル
			event.preventDefault();
		})
		.before("\n\n");

	// jQuery UI でアンカーをボタン化
	$("<a></a>").insertAfter($("#anchorContent2"))
		.attr({
			"id": "anchorContent3"
		})
		.button()
		.text("jQuery UI でアンカーをボタン化")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "10px"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました2");

			window.open("https://www.google.co.jp/maps/preview?hl=ja");

			// クリックする事によって起こるかもしれない処理をキャンセル
			event.preventDefault();
		})
		.before("\n\n");

});

</script>

<pre id="anchorContent"></pre>



タグ:jquery
posted by lightbox at 2014-07-04 14:54 | メソッド: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 ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり