SQLの窓 イラストAC フリー素材

2012年05月12日

jQuery の .text と .each と .html の一斉テスト

A
B
C
.text( function(idx,text){} ) で、テーブルの要素に一度にアクセスしています。中で text は その要素内の text で、return しなければ、元の TD の中が変更される事はありません。

ここでは、HTML 文字列をセットして、後で < や > を &lt; や &gt; に変換する処理を行っており、その時に .each を使ってすべて読み込んで、.html で参照しています。

alert( $(this).html() ) と alert( this.innerHTML) は同じ結果になります。

<script type="text/javascript" src="http://winofsql.jp/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(function(){
	$("#action").click(function(){
		// TD をすべて取り出す
		$("#tbl td").text(function(idx,text){
			if ( idx % 2 == 0 ) {
				// 先頭の列には、行番号をセット
				return (idx/2+1);
			}
			else {
				// 2列目には、HTML が含まれた文字列
				// ( return しなければ変更されない )
				return text+=idx+"<input />";
			}
		})
	});
	$("#disp").click(function(){
		// TD をすべて取り出す
		$("#tbl td").each(function(idx){
			if ( idx % 2 == 0 ) {
				// 先頭列はなにもしない
			}
			else {
				// 2列目の中身を 変換後の文字列として取得
				alert($(this).html());
			}
		})
	})
});

</script>

<style type="text/css">
#tbl td {
	padding: 20px;
	border: 1px solid #000;
}
</style>
<input id="action" type="button" value="実行">
<input id="disp" type="button" value="変換後表示">
<table id="tbl">
<tr>
<td></td><td>A</td>
</tr>
<tr>
<td></td><td>B</td>
</tr>
<tr>
<td></td><td>C</td>
</tr>
</table>


タグ:jquery
【jQueryの最新記事】
posted by at 2012-05-12 19:27 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX