TOP > てきとうにこらむ > ゲーム作りとプログラミング日記 > jQueryでテーブルをappendで動的に追加していく Ajaxとかで動的にテーブルを操作したい ちょっと迷ったのでメモ。jQueryで動的に追加してみる。 参考書 jQueryクックブック のレシピ1.10あたり。 コード $("table").append( $("<tr></tr>") .append($("<td></td>").text("テキスト")) .append($("<td></td>").text("テキスト")) ); 1行目はタイトルという場合 thタグが先頭行に入っている時には、"tr:gt(0)"を使うと便利。 // 削除 $("table tr:gt(0)").remove(); // 数える $("table tr:gt(0)").size(); サンプル 増やす・消す用にとりあえずH
テーブル情報を二次元配列に格納！jQueryで簡単にセル値を取得する方法！2014年10月27日 [jQuery] ウェブサイト作っていると、tableタグの値を自由に操作したい場面がちょくちょくある。 特にある行の値をすべて取得したいときや、列単位で値を取得するなど、 どういうロジックで値を取得しようか迷うときがある。 id値を指定できるならとても簡単ですが・・・行ならtrタグに各行の識別ができるようなidを割り当ててやればいい。 単純に１行目ならid=”row-1″と指定すれば、jQueryなど使って取得することができる。 列ならtdタグにid=”column-1″みたいな指定をすれば、簡単ですね。 この辺りはfor文など使って、列と行の番号をそれぞれ付与していけばいいのですが、 id値など設定していないtableタグから値を引っ張りたいとき、どうすればいいのだろうか？
【前提条件】 [環境] jQuery 1.9.0 DataTables 1.9.4 参考サイト DataTables 公式ページ DataTables | Table plug-in for jQuery 【概要】 今回はmRenderについてです。 mRenderは取得したデータを 表示用やソート用に加工を行い操作するものです。 【HTMLソース】 HTMLソースは毎回おなじみの形です。 <!DOCTYPE html> <html> <head> <title>サンプル</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="/js/libs/jquery-1.9.0/jquery.min.js"></script> <s
あと、最近のブログはここ JavaScript++かも日記 Facebookの仮想通貨Libra/Diemが来春リリースらしいので久しぶりに触ってみてます Facebookの仮想通貨Libra/Diem関連 |Blog | Demo | Facbook JavaScript部 | jQuery › Downloads › Plugins › csv2table | ( ccchart/ jQchart ) nightly- testing themeroller width jQuery 1.3. test-tm.htm blog デフォルトCSSのリセット方法 Reset the CSS ( default style sheet of csv2table ) csv2tableのデフォルトCSSをリセットし、自由にCSS設定する。 このページに$.csv2table.cssReset(
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
上記の広告は、60日以上更新がないブログに表示されています。 新たに記事を投稿することで、広告を消すことができます。 みなさん、グッドイブニング＾＾ 眠る前に風呂に浸かってきます。 それはそうと。 さくやは同じ課の喜多さんと梅村さんで四時まで飲みました。 少々飲みすぎたなので、ゲロが出そうなんですよ。 それはさておき、 このごろストレスで疲労困憊が激しいから 2週間前からバドミントンをはじめたんです?????? やるのは水曜日だけだから、いい気晴らしになりますし。 それはそうと。 本日の朝ご飯は好物の照り焼きが入っていたから、 今日の朝からやる気満々なおれです。 いきなり話題は変わりますが。 先週の水曜日のスタッフ会議で失言してしまったので、 今日の朝から少々うっとうしい気分なんですよ。 親父には道理に合わない理由で小言を言われるし、 殊のほかガックシしているんですよ。 うっとうしい気分な
以下のようなtableを書いたときに子要素であるtrを取得したいわけで。 <table id="table"> <tr> <td>hoge1</td> <td>hoge2</td> </tr> <tr> <td>hoge3</td> <td>hoge4</td> </tr> <tr> <td>hoge5</td> <td>hoge6</td> </tr> </table> <form action="javascript:void(0);"><input id="input" type="button" name="" value="run" /></form> 単純にjQueryを使うと $("#input").click(function(){ console.log($("table").children()); //jQuery(tbody) }); としちゃうんですが。 どうや
Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。 マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。 jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。 下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。 HTML <table id="tablefix"> <thead> <tr> <th rowspan="2">ヘッダA</th> <th rowspan="2">ヘッダB</th> <th colspan
以下のHTMLの状態で下記JavaScriptを実行すると行が追加される。 <table id="hoge"> <tbody> <tr> <td>col1-row1</td> <td>col2-row1</td> </tr> </tbody> </table> ▼JavaScript $('#hoge').append('' + '<tr>' + '<td>' + 'col1-row2' + '</td>' + '<td>' + 'col2-row2' + '</td>' + '</tr>' ; ); これってようするに $('#hoge')[0].innterHTML = $('#hoge')[0].innterHTML + '<tr>' + '<td>' + 'col1-row2' + '</td>' + '<td>' + 'col2-row2' + '</td>' + '</tr
$hoge = $('<table></table>'); $hoge.append('<tr></tr>'); と設定して、 $table.children('tr') でtrにアクセスできないのはなぜだろうと思っていたら、 自動的にtbodyが追加されてたんですね。 <table> <tbody> <tr></tr> </tbody> </table> こうなっていた、と。 道理で、範囲が直下の子要素までの『children()』では アクセスできなかったわけです。 自動的にtbodyが追加されるのは、IEへの対策だそうです。 ↓ 『IE6ではテーブル要素の動的生成時にtbodyを生成しないとだめみたい』 http://docolog.cocolog-nifty.com/papalog/2007/11/ie6tbody_f14c.html そもそも、tableの直下にtrを入れずに、t
jQueryのslideToggleってすごく便利だと思います。 表示非表示の切替がにょ～んて感じに切り替わる。 1文付け加えるだけで。ステキです。 $("div#hoge").slideToggle(); ただ問題もあるんだなー。これ。 いや、どちらかといえばjQueryよりはブラウザ側の問題。 で今回、tableをslideToggleで制御しようと思ったんだけど、 IEでの挙動が何やら怪しい。 カクカクしたりカクカクしたり、 果てはIE7なんて表示の切り替えってなんですかくらいに動かない。 結局tableをdivで括って解決？ まぁ、解決。。。 わかったことは、どのブラウザでもやっぱりtableに直接slideToggleってやるより divで括った方が動きがキレイだったってこと。 うん。難しいところです。 やりたかったのはタイトルクリックしたら画像も変えてコンテンツの表示も切り換え
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
