| A | |
| B | |
| C |
.text( function(idx,text){} ) で、テーブルの要素に一度にアクセスしています。中で text は その要素内の text で、return しなければ、元の TD の中が変更される事はありません。
ここでは、HTML 文字列をセットして、後で < や > を < や > に変換する処理を行っており、その時に .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の最新記事】
- clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で DIV の中の DIV を縦横中央に配置する
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )




























