2

すべての Cisco スイッチ ポートからのネットワーク データと、他のデータベースからのその他のものを集約し、このように驚くほどレンダリングされる HTML ファイルに出力しています (ただし、私はばかで、「tbody」の代わりにどこにでも「tbody」を描いたことに気づきました)。 "宣伝"）： ここに画像の説明を入力

今のところ、各テーブルに 10 行のデータしか表示していません (これらは、tbody、thead、および tfoot タグが割り当てられた HTML テーブルです。PHP、Javascript などはまだまったくなく、純粋な HTML のみです)。同様です (一部のスイッチには 48 個のポートがあり、一部のスイッチには 24 個など)。これらの「前、1、2、[...]、次へ」ボタンを使用して、できればページを更新せずに、各スイッチのデータを循環させたいと思います。

私が過去に使用したのは、次のセットアップです。

  • 独自の「div」ID を表示するために、考えられる各データ セットを指定します
  • 「style.display」属性を「none」にします（最初のページを除く）
  • これらのdivを配列に入れるJavascript関数を用意する
  • この関数は div を非表示および表示でき、引数として渡した div のみを表示します
  • この関数を HTML ボタンの onClick イベントに結び付けます

これが最善の方法ですか？私はこの HTML を動的に作成しているので (ボスのように C++ プログラムから index.html にテキストを出力しています)、div ID を多くの異なるセクションに割り当てるという問題を意味します。ボタンの親が含まれている div のみを更新しますか?

これは可能であり、確かに時間がかかると思いますが、私は優れた Web プログラマーではありません。より良い方法がある場合は、これに時間をかけすぎる前に聞いてみたいと思います.

4

2 に答える 2

2

追加のライブラリを気にしない場合は、データテーブルを使用するとページングが簡単になります（また、前述のように、事前に入力してからJSに任せてください）。

欠点は、それが含まれているライブラリであることです (つまり、HTML 内の HTML に直接含めるか、 CDN参照を<script>見つけます)。利点は、ページングが組み込まれていることであり、心配する必要があるのはそこにデータを取得することだけです. 次に、いくつかの簡単な構成オプションと、必要に応じていくつかの .CSS の変更を行うことで、目的の結果が得られます。

于 2013-07-26T19:40:14.207 に答える
1

イベント委任を使用して、いくつかのイベント ハンドラーのみを設定できます。

var footers = document.getElementsByTagName('tfoot');
for(var i=0; i<footers.length; i++) {
    footers[i].onclick = function(e) {
        console.log(e.target); // the clicked element within the footer
    }
}

これにより、テーブル フッターごとに 1 つのクリック ハンドラーが作成され、イベント オブジェクトのtargetプロパティ (またはsrcElementoldIE) を調べることで、どのボタンがクリックされたかを検出できます。次に、次のような標準プロパティを使用して、その要素に関連する DOM をトラバースできますparentElement(参照についてはMDNを参照してください)。

于 2013-07-26T19:38:57.017 に答える