tbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。
HTMLにはデータテーブルとして比較的使いやすいテーブルコントロールが出来ましたが、編集やボタンなどの部分は有料で、基本的な機能のみ無料です。さらに、サイズが変更されると、手動で更新するなどの面倒な操作が必要になります。そこで、誰でも使える無料のものを開発しました。
このプロジェクトは「Voidサービスデバイス開発キット」で使用されています。現在、主に Microsoft Edge ブラウザー、Chrome ブラウザー、その他はまだテストされていません。
tbl.js は完全に無料であり、自由に変更できます。fork へようこそ。
tbl.js は、リスト スタイル、追加、削除、変更、クエリ、テーブル全体の検索 、 グループ化 、 ページング関数 、テーブル全体の編集、行全体の編集、単一選択、複数選択、スタイルのカスタマイズをサポートしています。
は、jqueryのダイアログやタブなど、さまざまなコンテナに埋め込むことができます。
バージョン: 0.1betaバグを報告してください。できるだけ早く修正します。新年に休みはありません。 スタイルを変更する必要がない場合、tbl.cssをロードする必要はありません。tbl.jsがスタイルシートを動的にロードします。 既存のDOM ノード から構築された 2 行のテーブルを作成しましょう。
1 html:<html><body><p></p></body></html>
2 new tbl(document.body.children[0],{data:[["row1"],["row2"]]});1 var tb = new tbl();
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1"],["row2"]]);1 var tb = new tbl(undefined, {format:[{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"},{width:"20%"}]});
2 with (document.body) { insertBefore(tb.dom, firstChild) };
3 tb.bind([["row1","data","data","data","data"],["row2","data","data","data","data"]]);300px、ヘッダーなし、タイトルなし、フッターなし、データ5個、ボタン、行インデックスを取得。
この方法ではインターレースカラーの変更が発生し、CSS を変更してスタイルを無効にする可能性があります。1 html:<html><body><p></p></body></html>
2 var tb = new tbl(document.body.children[0], {
3 editable: false, maxheight: "300px", header: false, title: false, footer: false, data: [[1], [2, "remove"], ["nan - not a number", "del"], [4, "del"], [5, "del"]], page_size: 100,
4 format: [
5 { width: "90%", nancenter: true, input: {type:"text"}},
6 { width: "10%", editable:true, input: { type: "button", value:"del", onclick: function () { tb.delete(tb.get_related_rowid(this));}}}
7 ]
8 });array である必要があります。
2 番目の列はいかなる状況でも編集できないと予想されます。 1 var tb_data = [];
2 for (var i = 0; i < 106; i++) {
3 tb_data[i] = [Math.random()>0.5?true:false, Math.random(), "1970-01-01", Math.floor(Math.random()*10), i, 0];
4 }
5 tb_data[i] = "this is group"; i++;
6 tb_data[i] = ["this is text"]; i++;
7 for (; i < 578; i++) {
8 tb_data[i] = [i, Math.random(), "2017-02-01"];
9 }
10 var tb = new tbl(document.body.children[0], {
11 editable:true,select:tbl.single,must_select:true,paging:true,data:tb_data,page_size:15,
12 format: [
13 { width: "5%", input: { type: "checkbox", check: "true" } },
14 { width: "30%", name:"name", uneditable:true },
15 { width: "20%", name:"date", input: { type: "date" } },
16 { width: "10%", name:"select", input: {type:"select", options:[0,1,2,3,4,5,6,7,8,9]} },
17 { width: "20%" },
18 { width: "15%", input: {type:"radio", name:"only"}}
19 ]
20 });API:
addは最後に追加されます。追加されたデータ行は、グループタイトルのテキストとして使用されます。 insert bind 新しいデータソースをバインドdelete clearクリーンアップedit 行を編集、空のパラメータはテーブル全体を編集することを意味します
select 行を選択
cancel _edit 編集をキャンセル ECancel_Select 選択をキャンセル
Select_Change 変更を選択
関数Set
読み取り専用 :
tbl :: SELECTS が選択tbl :: data ::edits 編集中の行、テーブル全体の編集は該当なし
構築オプション: max_height 最大の高さを超えた場合、スクロールバーが表示されますpage_size ページサイズ
data 初期化データheader ヘッダーを表示するかどうか
footer フッターを表示するかどうかinfo 情報を表示するかどうか
paging ページングを表示するかどうかtitle_bar タイトル バーを表示する
title タイトル バーのテキスト search 検索ボックスを表示する
テーブル全体の編集
select 選択の種類: 0、単一選択、2、複数選択。 == 1, tbl.multiselect == 2
select_change 選択の設定
イベント処理
関数
must_select 行を選択する必要があります
format 列のフォーマット
width 幅は、有効な HTML 幅にすることができます。例: 100px または 20%。
INPUT は、
状態を編集する INPUT ノード属性を編集するために使用されます。
HTML/Input 属性と同じ名前です。
名前フィールド名、ヘッダーの UNEDITABLE 列に表示されます nancenter non-ナンバーセンター
以上がtbl.js div によって実装されたテーブル コントロール。完全に無料で、jquery に依存しません。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7533
15
1379
52
82
11
21
86
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
