HTML テーブルの空白セル補完を実装する方法

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レイアウトが主流でした。その時、グリッド内の空白のセルをどのように埋めるかという疑問が生じました。 ——これは私が自社の製品ページを制作する際に直面した頭痛の種です。私はプログラマー出身ではないので、アルゴリズムが少し関わる問題に直面すると途方に暮れてしまいます(笑)。ちなみに、ページングアルゴリズムには苦労したのを覚えています。

いわゆるグリッドとは、3 行 x 4 列 = 合計 12 個のセルを持つ表を指します。製品が 10 個しかない場合は、表の 10 個のセルにのみデータが入力され、残りは空白になります。空白であっても、<td></td> 要素をレンダリングする必要があります。レンダリングしないと、テーブルが歪んで見えます。もちろんハードコードすることも可能ですが、問題はテーブルが ASP によって動的にレンダリングされることです。したがって、空白の TD をどのように計算して表示するかが問題になります。当時はいくつかの方法を思いつきましたが、今思えば、もちろんあまり合理的ではなかったのですが、とにかく、表示できる限りは試してみるしかありませんでした...ハハ。

その後、DIV/CSS の時代になると、Table は非推奨になりました。つまり、アルゴリズムは気にしません。 ——その後のプロジェクトで、テーブルレイアウトがまだ適用可能であることがわかったので、この小さな問題について考えました。 JS を使用した動的制御のコードは次のとおりです。

/**
 * @class レンダリングテーブル
 * 配列と列数を入力して、表マークアップを生成します。
 * @param {配列} リスト
 * @param {数値} 列数
 * @param {関数} getValue
 */
定義(関数(require, exports, module) {
 module.exports = 関数 (リスト、列、getValue) {
  this.list = リスト;
  this.cols = cols || 5;
  
  this.getValue = getValue || this.getValue;
 }
 
 module.exports.prototype = (新しい関数(){
  this.render = 関数(リスト){
   リスト = リスト || this.list;
   
   var len = リストの長さ;
   var cols = this.cols; // 桁数 var rows;
   var 残り = len % cols;
   var html = [];
    行数 = 長さ / 残り;
    
   if(remainder == 0){ // 余りなしで割り算して直接処理できる list.forEach(addTr.bind({
     列: 列、
     html: html、
     getValue: this.getValue
    }));
   }else{ // 残りを処理する var remainderArr = list.splice(list.length - remainder);
    
    リスト.forEach(addTr.bind({
     列: 列、
     html: html、
     getValue: this.getValue
    }));
   
    // 空白を埋めます var emptyArr = new Array(cols - remainnerArr.length);
    空のArr = 空のArr.join('空');
    空のArr = 空のArr.split('空');
    // 残り + 空きスペース remainnerArr = remainnerArr.concat(emptyArr);
    
    if(remainnerArr.length != cols){
     throw '最後の行の長さが間違っています!長さは ' + cols; である必要があります。
    }
    残りのArr.forEach(addTr.bind({
     列: 列、
     html: html、
     getValue: this.getValue
    }));
   }
   
   
   addTable(htmls.join('')) を返します。
  }
  
  /**
   * 表示された値を取得するためのデフォルトの関数。この関数は通常オーバーライドする必要があります。
   * @param {混合}
   * @return {文字列}
   */
  this.getValue = 関数(データ){
   データを返します。
  }
   
  /**
   * 各値に <td></td> を追加します。行がいっぱいの場合は、</tr></tr>を追加します。
   * @param {Mixed} アイテム
   * @param {数値} i
   * @param {配列} arr
   */
  関数 addTr(item, i, arr){
   var html = '<td>' + this.getValue(item) + '</td>';
   
   もし(i == 0){
    html = '<tr>' + html;
   }そうでない場合、(i + 1) % this.cols == 0 && i != 0){
    html += '</tr><tr>';
   }そうでない場合(i == arr.length){
    html += '</tr>';
   }
   
   this.htmls.push(html);
  }
  
  /**
   * 
   * @param {文字列} html
   */
  関数 addTable(html){
   '<table>' + html + '</table>' を返します。
 // var table = document.createElement('table');
 // テーブルの内部HTML = html;
 // テーブル境界="1";
 // document.body.appendChild(テーブル);
  }
 });
});

これはすぐに思いつく問題だと思うかもしれませんが... 当時、私は転職活動中でした... ちょっとした「技術的な内容」の問題は、私にとってはつまずきの石になってしまいました...

2019-5-18 JSTLメソッド:

<%
 //空白セルを補完します String tds = ""; int maxTds = 9; 
 リスト<?> list = (リスト<?>)request.getAttribute("list");
 for(int i = 0; i < (maxTds - list.size()); i++ ) {
  tds + = "<td></td>";
 }
 
 リクエストの属性を設定します("tds", tds);
%>
  <テーブル>
   <tr>
    <c:foreach items="${list}" var="item">
     <td>
      <h3>${item.name}----${totalCount}</h3>
      <p></p>
      <div></div>
     </td>
     <c:if test="${((currentIndex + 1) % 3) == 0}">
   </tr>
   <tr>
    </c:if>
    <c:if test="${((currentIndex + 1) == totalCount) && (totalCount != 9)}">
     ${tds}
    </c:if>
    </c:foreach>
   </tr>
  </テーブル>

HTML テーブルの空白セルを完成させる方法についての記事はこれで終わりです。HTML テーブルの空白セルを完成させる方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  div間のギャップの解決策

>>:  CSS3で実装されたスライドメニュー

推薦する

Git サーバーを使用してデバッグ ブランチを表示し、修正する方法を 1 日 1 分で学習します。

デバッグブランチプロジェクトの通常の開発中に、以前にリリースされたバージョンにバグがある場合がありま...

MySQL で sum 関数を使用する例のチュートリアル

導入今日は、MySQL の sum 関数の使い方を紹介します。この関数は、MySQL データベースを...

XHTMLタグは適切に使用する必要があります

<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...

Ubuntu 20.04 ファイアウォール設定の簡単なチュートリアル (初心者)

序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...

JS はランダム点呼システムを実装します

参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...

Centos7 で yum を使用して Ceph 分散ストレージをインストールするチュートリアル

目次序文yumソース、epelソースを設定するCephソースの設定Cephとそのコンポーネントをイン...

JavaScript ES6 モジュールの詳細な説明

目次0. モジュールとは何か1.モジュールの読み込み1.1 方法1 1.2 方法2 2. 輸出と輸入...

Node.js+expressメッセージボード機能実装例

目次メッセージボード必要なライブラリオープンソースプロジェクトプロジェクト構造メッセージボードnod...

Linux で pip 操作中にタイムアウトが発生する問題を解決する方法

Linuxインスタンスでpipを使用する際のタイムアウト問題を解決する方法pip は最も人気のある ...

MySQL における「:=」と「=」の違いの簡単な分析

=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の場合は等号の効果があ...

動的および静的分離を実装するための Nginx サンプル コード

この記事のシナリオと組み合わせて、Nginx と Java 環境 (SpringBoot プロジェク...

Linux システムで複数のバージョンの PHP を共存させるソリューション (超シンプル)

PHP7が出たので、最新バージョンのファンとしては、早速アップグレードして体験してみました。しかし...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

Mysql 更新マルチテーブル共同更新方法の概要

次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...

docker デプロイメントの実装手順 lnmp-wordpress

目次1. 実験環境2. Dockerソースをインストールする3. Dockerをインストールする4....