JavaScript で要素を作成するとなると、createElement で作成する事になりますが、jQuery では直観的に HTML の文字列として作成するサンプルが jQuery の正式ドキュメントのいたるところで見る事ができます。 その際、大きく分けて二種類に分ける事ができますが、その差は親要素に対して実行するか、隣の要素に対して実行するかの違いになります。 .append と .prepend append は、親要素の子要素として最後に挿入され、prepend は、先頭に挿入されます。さらに、appendTo と prependTo という、最初に挿入する要素を $("要素記述") で確定しておいて、appendTo( または prependTo ) でセレクタを指定して実行する二通りがあります。 後者のほうが、ソースコード上で作成される内容が最初に来るので意味が解りやすくなると思いますが、処理としては前者のほうが自然に記述できると思います。 .after と .before after と before にも、insertAfter と insertBefore と言う、ペアとなるメソッドがありますが、append 等と違うのは、最初に指定する要素が隣の要素であるところです。しかし、親要素から、find メソッドで子孫全部から取り出したり、children メソッドで子要素だけを対象にする事もできるので、出来上がったコードが解りやすいかどうかの違いでしか現れません。どちらを使ってもいいと思います。 移動について 既存の jQuery のオブジェクト同士で実行すると移動になるので、この場合は一行で書かずに変数を使用して移動の対象と移動先を明確にしたほうが良いでしょう 置き換えについて 使い方のペアとして replaceWith と replaceAll というメソッドがあり、現在の要素の種類そのものを置き換える事ができます。ここでは、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
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- $.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
