jQueryでテーブル（table）を操作する小回り系コード5種
Posted: 2011.08.31 / Category: javascript / Tag: jQuery テーブルを操作するのに大掛かりなことはプラグインがいろいろありますのでそちらを使うとして。 ここでは、わりと細かいことをjQueryでやってみます。 html 始めに操作するべきテーブルを用意します。 ごくごく普通のテーブルですね。 html <table class="table01"> <tr> <th>商品名</th> <th>入荷日</th> <th>価格</th> </tr> <tr> <td>椅子</td> <td>2011-08-01</td> <td>¥ 2,800</td> </tr> <tr> <td>机</td> <td>2011-08-08</td> <td>¥ 6,800</td> </tr> <tr> <td>本棚</td> <td>2
WordPressでテーブル・表を作成するプラグイン9個まとめ
結構頑張ってくれます。 ExcelやGoogleスプレッドシートの表を貼り付けるのも簡単 Mwrkdown記法では、エクセルやGoogleスプレッドシート等の表計算ソフトで作った表を貼り付けるのも簡単です。 まず表全体をコピーします。 これを一括置換機能のあるエディター（Wordpress投稿画面のテキストエディタではありません）に貼り付けます。 区切り文字（タブ又はスペース）を「|」に置換します。 これをコピーして、Wordpressの投稿画面のテキストエディタに貼り付けます。 cssで罫線をつけるなどスタイルを整えられる テーブルに枠線、横線、縦線をつけたかったので、テーマのstyle.cssに次のようなCSSを書きました。 table { border-bottom: 1px solid #ededed; border-right: 1px solid #ededed; font-w
僕の考えた、最強の管理画面フレームワーク - Qiita
Webのシステムを作成するときに、なんだかんだで必要になる管理画面ですが railsでもいくつか有名なgemが出ています。 結局はその中でtypusを選んで現在でも使用しているのですか、そこから得られた知見から、こういう管理画面作成ツールが欲しいな、というイメージを固めたので、ついでではなせればな、と感じて記事にしました。 先ほど、話したように現在はtypusを管理画面作成ツールとして主に使っていて、ときどきコーナーケースでバグを踏んでは、pull requestを送ったりしています。 これを採用している最大の理由はカスタマイズ性と、その設計指針の正しさで 設定ファイルで大まかな設定を記述してある どんな機能も上書き可能 view-helper-viewの入れ子構造での部品化 特に、各々の表示項目を細かく部品化して、viewの一部のみを変更したいときに、そこのpartialだけを変更すれば
[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
