table内をテキスト検索して該当キーワードを持つ列を表示する
Result table内のすべてのテキストから検索し、該当箇所のある列を表示する、みたいなやつ ある程度の量を持つデータテーブルだけど超大量でもないから、重いスクリプトは使いたくない、みたいな中途半端な状況の時は少ないコードで済ませたいところですね vanillaなコードで動作します JavaScript(function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; function _onInputEvent(e) { _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, funct
jQuery Rowspanizer - 動的にHTMLテーブルのrowspanを設定
これは良いアイディア！ HTMLでテーブルはよく使われます。検索結果やレポーティングなど活躍の幅は広いです。そしてデータを表示する際に、重複した項目はセルを連結して表示するでしょう。しかし、colspan/rowspanをシステムで動的に設定するのは非常に面倒です。 そんな時に使ってみたいのがjQuery Rowspanizerです。指定したテーブルを解析し、重複部分を連結してくれます。 jQuery Rowspanizerの使い方 元の表示です。 このようになります。 JavaScriptで処理を行ってくれるならば、システムはすべての行を出力するだけで良くなります。jQuery Rowspanizerが行ってくれるのはrowspanに限定されますが、同様の仕組みでcolspanに適用するのも難しくなさそうです。 jQuery RowspanizerはjQuery/JavaScript製の
PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQueryvar vis = function(e) { var count = $(e).children('td').not(':first-of-type').length; var width = $('.chart').height(); var barwidth = (width/count)-10; var heighest = 0; var chartTitle = $('th:first-of-type').html(); var tableTitle = $('.table-title').html(); var chartTitleVal = $(e).children('td:first-of-
項目数が多くなったリストやテーブルを自動で複数ページに分割し、ページネーションを加えるスクリプト・「paginathing.js」
paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリンクテキストの変更が可能です。冗長化した情報が整理して見やすくしたいですね。導入も楽そうです。ライセンスはMIT。 paginathing.js
Tabulator - Interactive JavaScript Tables
The easy to use, fully featured, interactive table jQuery plugin Download 3.2 Interactive Tables Made Simple A lightweight, fully featured, interactive table jQuery plugin. Version 3.2 Out Now! Column Calculations, Multi-level Grouping, Touch Events, Nested Data Field Definitions, Header Filter Functions, Scroll Keybindings and much more! Checkout the news article to find out more! Tabulator allow
tableの行をクリックすると下部に詳細が表示される
Result jQuery//参照元に準拠し、onclick処理はtable内に書いてます function show_hide_row(row) {$("#"+row).toggle();}css#table_detail tr:hover{ background-color:#ddd; cursor:pointer; } #table_detail .hidden_row{ display:none; }html<table border=1 id="table_detail" align=center cellpadding=10> <tr> <th>名前</th> <th>年齢</th> <th>給料</th> <th>仕事</th> </tr> <tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」を紹介します。 １．はじめに 本エントリーで紹介するjQueryプラグイン「Table Hover」は次のような機能があります。 選択したセルの行を反転 選択したセルの行と列を反転 colspan/rowspan設定されているセルを反転 サンプル ２．プラグインのダウンロード Table Hoverプラグインのページにアクセスして、Downloadをクリック。 ダウンロードしたアーカイブを展開し、中にあるjsファイルを利用します。 ３．基本設定 ざっくりですがプラグインの基本設定について解説します。 jQueryとTable Hoverプラグインを読み込ます。 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
10 Useful JS Tools For better HTML Tables
If you have been looking for some useful JavaScript tools to make HTML tables better and more value-added then you must go through this post. Here we have presented 10 the most useful JavaScript tools especially designed for making HTML tables better. The presentation and accessibility of data plays a vital role when you are displaying a record of hundreds of tables. Here we are presenting some us
データの編集やソート、ページングにも対応した軽量なデータグリッドを実装するスクリプト・「jsGrid」
jsGridはデータグリッドを実装する為の軽量スクリプトです。jQueryに依存しています。データテーブルのセル内のデータ編集やソート、ページングにも対応しています。スタイルコンポーネントのカスタマイズもし易いように設計したとの事。シンプルで良さ気です。ライセンスはMIT。 jsGrid動作サンプル
Chartinator
About Chartinator Chartinator - Google Charts made easier and accessible. Description: A jQuery plugin for transforming HTML tables, Google Sheets and js arrays into charts using Google Charts Repository: https://github.com/jbowyers/chartinator Demo: http://chartinator.com Bower: chartinator Requires: jQuery, Google Charts Author: jbowyers Copyright: 2015 jbowyers License: GPLv3 Version: 0.3.10 De
WATable - A swiss army jQuery table plugin
Filter on strings, numbers, booleans(checkboxes) and dates by typing into the fields (or optionally datepicker for dates). If you hoover a filter field with your mouse, you'll see a tooltip with hints on how they work. Prefix your filter with ! to get everything except your filter. Ex all but 10 to 20: !10..20 Prefix your filter with ? for regex filtering. Ex John and Jane Doe: ?John Doe|Jane Doe
jQueryでテーブル幅を変更できる「jQuery Resizable Columnsプラグイン」
jQueryでテーブル幅を変更できる「jQuery Resizable Columnsプラグイン」の紹介です。 変更前 変更後 １．はじめに テーブルの列幅は通常であれば固定されていますが、このプラグインを利用することで可変にすることができます。 特定の列を折り返しなしで見たいときなど便利そうです。 また変更内容をlocalStorageに保存して、リロードしても元に戻らないようにさせることも可能です。 ２．プラグインのダウンロード jQuery Resizable Columnsプラグインのページにアクセスし、「Download ZIP」をクリックしてアーカイブをダウンロードします。 ダウンロードしたアーカイブを展開し、中にあるdist配下の、 jquery.resizableColumns.js jquery.resizableColumns.min.js のいずれかを利用します。 ３
Basic Table (jQuery) Demo
Demonstration of different settings for Basic Table. For full documentation of settings and method visit http://www.jerrylow.com/basictable or https://github.com/jerrylow/basictable. Basic Implementation The basic implementation using all default settigs. The table will use responsive mode when the viewport is less or equal to 568px in width. Name Age Gender Height Province Sport
Autocomplete-Table by vyasrao
Autocomplete - Table One major challenge we faced in autocomplete was to display the data in a tabular format. When there are many rows of information available, it was difficult to display the relevant data of a row next to each other. This forced to develop a JQuery plugin which can display the relevant information in a table format. Advantages Display details in n number of columns Filter by ke
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
縦に長いtableのヘッダーをstickyにするスクリプト・「jquery.stickyTableHeader 」
タイムテーブルのような時間表を作成出来るjQueryプラグイン・「jQuery Skeduler Plugin」
https://codefog.github.io/
Googleスプレッドシートをtable要素としてWebサイトに埋め込むスクリプト・「Sheetrock」