jquery-fulltable - jQueryで任意のテーブルを便利に
業務システムなどでよく使われるテーブルタグ。素のままでは小さなテーブルはよくとも、多数のデータを表示した際の使い勝手がよくありません。かといって多機能にするのは大変です。 そこで使ってみたいのがjquery-fulltableです。任意のテーブルをjQueryで多機能にします。 jquery-fulltableの使い方 適用後のテーブルです。並べ替え、フィルタリングができます。 インクリメンタルな絞り込みです。 ドロップダウンでの絞り込みも可能です。 データの追加、編集もできます。 jquery-fulltableを使えば任意のテーブルを多機能にできます。サーバサイドの変更もいらず、すぐに実装できるでしょう。他にも色々要望は出るかも知れませんが、まずはjquery-fulltableで対応してしまうことで多くのニーズは満たせそうです。 jquery-fulltableはjQuery/Jav
[Ruby] コンソールアプリで表を出力しよう
■ この記事について メンテナンスや日々の確認のために ちょっとしたスクリプトを書くことがあります。 データなどを確認したい場面では タブ区切りでのテキストを出力していましたが データ量が大きくなると視認性が悪くなります。 そこでコンソール上でも表を出力したい！ となります。 ※記事内でソースコードを変更する箇所がありますが、利用する場合は自己責任でお願いします。 ■ formatador rubygemsでインストールができる formatador を使うこととします。 簡単な使い方は以下の通りです。 #-*- coding: utf-8 -*- require "rubygems" require "formatador" data = [ {:name => "taro", :age => 30}, {:name => "hanako", :age => 25} ] Formatad
tableの列ごとに任意のキーワードでフィルタリングできる軽量jQueryプラグイン・Multifilter
tableから複数キーワードでフィルタリングできるjQueryのプラグイン・Multifilterのご紹介です。非圧縮でも2KB以下と、とても軽量です。大量な情報を含むtableにあると便利そうですね。 tableコンテンツのフィルタリング用スクリプトです。プラグイン自体はとっても軽量で、導入も楽なのでなかなか使いやすい気はします。 こういうの。デモを用意しました。 尚、データはなんちゃって個人情報を利用させて頂いています。 $('.foo').multifilter()使い方もシンプル。上記のようにtableを指定。 <div class='filters'> <div class='filter-container'> <input autocomplete='off' class='filter' name='名前' placeholder='名前' /> </div> <div c
CSSでtable幅を設定するためのまとめ
CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。 うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。 記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。 １．table要素に幅を設定 table要素にwidthプロパティを設定すると、th要素/td要素の幅は次のようになります。 th要素/td要素の内容の幅が同じ場合は均等割りつけ th要素/td要素の内容の幅が異なる場合は長さに応じて割りつけ th要素/td要素にwidthプロパティを設定した場合、table要素に設定したwidthプロパティの値を超えない範囲で適用 例として、次のtable要素を利用します。
日々つれづれ 一行おきにテーブル行の色を変える その2
一行おきにテーブル行の色を変えるの続きです。 今回は複数のテーブルがあった場合に、ちょっと気になったところがあったので直してみます。 2. 複数のテーブルで使った場合 複数のテーブルが存在する場合、行数によって2個目以下のテーブルの色の付きがちぐはぐになることがあります。 表示例 品名数量ボールペン(黒)6ボールペン(赤)2付箋5ファイル10品名数量ボールペン(黒)6ボールペン(赤)2付箋5ファイル10 ･･････何だか気になります。 というわけで、テーブルごとに行数を数えてくれるものはないか、検索。 そこで見つけたのが、 nth-child() のchildセレクタです。 nth-child()は、各親要素からn番目の子要素という数え方をします。 ちなみに、even/oddとは、数え方が違うので注意が必要です。 even/oddは、0から数えて偶数と奇数に分かれます。 nth-chil
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSONから高性能なtableを作成してくれるスクリプト・「Tabulator」
HTMLで書いたtableのデータをプレーンテキストやCSV、XLSなどのフォーマットでエクスポート出来るスクリプト・「TableExport.js」
tableにフィルタ機能+αを加えるスクリプト・「TableFilter」
HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」:phpspot開発日誌
tableのデータを様々なフォーマットでエクスポート出来る様にするスクリプト・「HTML Table Export」