お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

クロス・ブラウザーDHTMLテーブル

カスタムWebコントロールによってHTMLの限界を超える

Shelley Saxena, Developer, IBM WebSphere Site Analyzer

Shelley Saxena氏は、WebSphere Site Analyzerグループのユーザー・インターフェース開発者です。彼は、4年以上ツールおよびUI開発に携わっています。

概要： HTMLのテーブル・タグを使用すると、Webページの内容を効果的に、また読みやすいフォーマットで構成することができます。しかし、データの表示以上のことを望む場合、このタグでは限界があります。Javaアプレットの使用も可能ですが、読み込みに時間がかかり面倒です。この記事では、Shelley Saxena氏がDHTMLやJavaScriptによるクロス・ブラウザー・テーブルの作成方法を説明します。クロス・ブラウザー・テーブルには、Javaによるテーブル・コンポーネントとほぼ同じ機能があります。

タグを付ける!

日付: 2001年 5月 01日
レベル: 初級
この記事の原文: 英語
アクティビティー： 1491 ビュー
お気軽にご意見・ご感想をお寄せください：

ブラウザーの種類

DHTMLやJavaScriptを使用する際の問題の1つは、NetscapeとInternet Explorerで、その使用に関して多くの点が異なることです。そのため、最初に小さなスクリプトをコーディングして、ブラウザーのレベルと種類を判定することが必要です。クライアント・ブラウザー側では、それはリスト1 に示されているJavaScript関数を使用して行うことができます。

リスト1

                
function UserAgent() {
     var b=navigator.appName;
     if (b=="Netscape") this.b="ns";
     else if (b=="Microsoft Internet Explorer") this.b="ie";
     else this.b=b;
     this.version=navigator.appVersion;
     this.v=parseInt(this.version);
     this.ns=(this.b=="ns" && this.v>=4);
     this.ns4=(this.b=="ns" && this.v==4);
     this.ns5=(this.b=="ns" && this.v==5);
     this.ie=(this.b=="ie" && this.v>=4);
     this.ie4=(this.version.indexOf('MSIE 4')>0);
     this.ie5=(this.version.indexOf('MSIE 5')>0);
     this.ie55=(this.version.indexOf('MSIE 5.5')>0);
}

このような長い関数の代わりに、リスト2 のように簡単な関数によってそれを行うこともできます。

リスト2

                
If (document.layers) {
// netscape code
}
else
if (document.all) {
//IE code
}

しかし、リスト1のアプローチの方が構造がより整っており、ブラウザーのバージョンを明確に示しているため、将来の拡張に対応できます。ブラウザーを識別するコーディングの全文は、リスト3 のようになります。

リスト3

                
function UserAgent() {
	var b=navigator.appName;
	if (b=="Netscape") this.b="ns";
	else if (b=="Microsoft Internet Explorer") this.b="ie";
	else this.b=b;
	this.version=navigator.appVersion;
	this.v=parseInt(this.version);
	this.ns=(this.b=="ns" && this.v>=4);
	this.ns4=(this.b=="ns" && this.v==4);
	this.ns5=(this.b=="ns" && this.v==5);
	this.ie=(this.b=="ie" && this.v>=4);
	this.ie4=(this.version.indexOf('MSIE 4')>0);
	this.ie5=(this.version.indexOf('MSIE 5')>0);
	this.ie55=(this.version.indexOf('MSIE 5.5')>0);
}
at=new UserAgent();

上に戻る

セル・コントロール

次に、データ表示のためのコントロールを作成します。このコントロールとは、テーブルのセルのようなものです。コントロールの作成のために、中核にダイナミック・レイヤーを持つJavaScriptオブジェクト「BaseLayer」を作成しましょう。このダイナミック・レイヤーを作成するには、リスト4 のようにします。

リスト4

                

  if (at.ns4) {
             if (this.w=="100%") this.lyr=new Layer(window.innerWidth);
             else this.lyr=new Layer(this.w);
  }
  else if (at.ie4) 
  {
              var code='
'
              document.body.insertAdjacentHTML("beforeEnd", code);
     this.lyr=document.all[index];
  }
  else if (at.ie5 || at.ns5) {
              this.lyr=document.createElement("DIV");
              this.lyr.style.position="absolute";
              this.lyr.id=index;
              document.body.appendChild(this.lyr);
  }

この使用法で説明しているコード全文のサンプルは、こちらのzipファイルをダウンロードしてください。

上に戻る

テーブル

これで、ブラウザーの種類に依存しないテーブル・コードを記述することができます。リスト5 にテーブル・オブジェクトの定義が示されています。

リスト5

                
function Table(nRows, nCols)
{
  this.nRows = nRows||0;
  this.nCols = nCols||0;
 //create an array to hold the data for the cells
  this.data = new Array(nRows);           for (i=0; i<nRows;i++)
  {
    this.data[i] = new Array(nCols); }
 //create an array to hold the layers for the cells
  this.cells = new Array(nRows);
  for (k=0;k<nRows;k++)
  {
    this.cells[k] = new Array(nCols);
  }
 //other variables to hold options
 
  //functions for doing stuff
  
}

すでにお気付きかもしれませんが、テーブル・オブジェクトの定義にはブラウザー固有のコードはありません。そのように複雑なコードは、BaseLayerオブジェクトの中にうまく隠されています。オブジェクトで宣言されているプロパティーに新たなプロパティーを追加する場合は、オブジェクトの定義を修正するか、または、オブジェクト変数のプロパティーを直接指定することが必要です。リスト6 を参照してください。

リスト6

                
var table = new Table(10,10);
table.newProperty = newPropertyValue;

テーブル・コード全文はこちらを参照してください。

上に戻る

テーブルの初期設定

Webページでテーブルを使用するには、リスト7 にあるようにオブジェクトの初期設定を行ってください。

リスト7

                
var rows = 4, cols = 4;
var columnWidths = [100,150,100,150];
var myData = new Array(rows);
for (i=0;i<rows;i++)
{
    myData[i] = new Array(cols);
    for (j=0;j<cols;j++) myData[i][j] = "("+i+","+j+")";
}
myTable = new Table(rows,cols);
myTable.setTableData(myData);
myTable.paint();

この使用法で説明しているコード全文のサンプルは、リスト8 を参照するか、または、こちらのzipファイルをダウンロードしてください。

上に戻る

特別な機能

このテーブルには、以下のような機能があります。

初期設定で行と列の数を指定し、実行時にそれらを追加 / 削除することができます。行と列は、テーブルの最後に追加するか、または、テーブルの中央に挿入することができます。
行や列を、実行時に隠したり表示したりすることができます。
行や列を、実行時にテーブルから削除することができます。
2つの列の入れ替えができます。
列ごとのソートができます。また、コードを変更することで、列ではなく行のソートを行うことができます。
列のセルをドラッグすることによって、列のサイズを変更できます。
列の幅と行の高さを変更できます。
現在選択されている行を、使用可能に設定されている場合に、別の色で強調表示することができる「行選択機能」があります。色はユーザーが定義できます。
ホバー・ヘルプ機能があり、使用可能に設定されている場合、セルの上にカーソルを置くことでそれぞれのセルについてのホバー・ヘルプが表示されます。
実行時に、あらゆるセルに対してデータ設定が可能です。

上に戻る

結論

HTMLコントロールだけで満足している必要はありません。DHTMLやJavaScriptが提供するさまざまな機能によって、開発者はカスタムWebコントロールを作成することができます。クロス・ブラウザーDHTMLテーブルは、そのようなコントロールの一例です。オブジェクト形式のコード構成であるため、クロス・ブラウザーDHTMLテーブルはWebページにきわめて簡単に組み込むことができます。また、ここで使用したBaseLayerコードを、ブラウザーに依存しないダイナミック・レイヤーの作成に使用することもできます。リスト9 に示されているように、対応するJavaScriptファイルをコードにインポートするだけでそれが可能です。

リスト9

                
<SCRIPT language="JAVASCRIPT" src="Browser.js"></SCRIPT>
<SCRIPT language="JAVASCRIPT" src="BaseLayer.js"></SCRIPT>
<SCRIPT language="JAVASCRIPT" src="Table.js"></SCRIPT>

上に戻る

ダウンロード

内容	ファイル名	サイズ	ダウンロード形式
mple code of complete usage	table.zip	7 KB	HTTP

ダウンロード形式について

参考文献

この使用法で説明しているコードのサンプル全文は、こちらのzipファイルをダウンロードしてください。
Dynamic Drive は、DHTMLに関する優れた情報を提供しています。
Beginning JavaScript (抜粋) では、JavaScriptを使用してInternet Explorer 4+ でDynamic HTMLを作成する方法についてPaul Wilton氏が説明しています。
このサイトには、いくつかの面白いスクリプトがあります。
JavaScriptその他のフリー・ツールは、IBMのEase of Useサイトからダウンロードできます。