テーブルデータの読み書き

Javascriptでページ内のデータを読み書きする例としてテーブルのデータを読み書きするサンプルです。テーブルの場合ループ処理することが多いのでサンプルにしました。他のデータもサンプルが参考になると思います。

サンプルのTABLEのコードは以下のようになっています。

<DIV><FORM id="fashion" name="fashion"><TABLE id="shohin_table" class="list"><TBODY>
<COL width=100px>
<COL width=100px>
<COL width=100px>
<COL width=100px>
<TR>
<TH>ボタン</TH>
<TH>商品名</TH>
<TH>カラー</TH>
<TH>価格</TH>
</TR>
<TR>
<TD><input class="button blue" type=button value="循環" onclick="roundCols(this);"></TD>
<TD><input type="checkbox" name="clothes" value="100">Tシャツ</TD>
<TD><input type=text name="color" value="レッド" size="4"></TD>
<TD name="price">1000円</TD>
</TR>
<TR>
<TD><input class="button blue" type=button value="Checkbox反転" onclick="flipCheckbox(this);"></TD>
<TD><input type="checkbox" name="clothes" value="200">カーデガン</TD>
<TD><input type=text name="color" value="ブラウン" size="4"></TD>
<TD name="price">2000円</TD>
</TR>
<TR>
<TD><input  class="button blue" type=button value="INPUT" onclick="inputOverwrite(this);"></TD>
<TD><input type="checkbox" name="clothes" value="300">ポロシャツ</TD>
<TD><input type=text name="color" value="ブルー" size="4"></TD>
<TD name="price">3000円</TD>
</TR>
<TR>
<TD><input  class="button blue" type=button value="INPUT2" onclick="inputOverwrite2(this);"></TD>
<TD><input type="checkbox" name="clothes" value="400">ネルシャツ</TD>
<TD><input type=text name="color" value="ホワイト" size="4"></TD>
<TD name="price">4000円</TD>
</TR>
<TR>
<TD><input  class="button blue" type=button value="TEXT" onclick="textOverwrite(this);"></TD>
<TD><input type="checkbox" name="clothes" value="500">パーカー</TD>
<TD><input type=text name="color" value="グリーン" size="4"></TD>
<TD name="price">5000円</TD>
</TR>
</TBODY></TABLE></FORM></DIV>

1.全セルの値の取得

全セルの値を取得して表示するコードの例です。下のボタンをクリックするとポップアップで表示します。
TABLEの全セルの値を取得する場合は、まず、DOMのgetElementByIdメソッドでTABLEのID( = "shohin_table" )よりTABLEのオブジェクトを取得します。そのオブジェクトから行オブジェクト(rows)( = TR )、セルオブジェクト(cells)( = TD )の順番にアクセスし、セルの値をinnerHTML属性により取得します。行オブジェクト、セルオブジェクトとも配列の開始は0です。
TABLEの行数はrows.length属性です。TABLEの1行目( rows[0] )はここでは列のタイトルなので、for文は1から開始して、列の値の表示はしないようにしています。
ここでの例のようにDOMにより.rows[i].cells[j].innerHTMLのようなアクセス方法はコストがかかるので、forループで多量のデータ(環境に依存しますがIE7等で数百以上)を扱う場合はレスポンスに注意が必要です。以下このページでDOMによりforループの中で毎回データの読み書きをするサンプルは同様です。サンプルではデータが多くないし通常は一度に全データにアクセスすることは無いので、サンプルとして敢えて使用しています。

function showCellsByDOM(){
    var work ="";
    var shohin_table = document.getElementById("shohin_table");
    for ( var i = 1; i < shohin_table.rows.length; i++ ) {
        for ( var j = 0; j < 4; j++ ) {
            var cellValue = shohin_table.rows[i].cells[j].innerHTML;
            work += cellValue + ",";
        }
        work += String.fromCharCode(13)+String.fromCharCode(10);
    }
    alert(work);
}

2.INPUTの値の取得(DOM rows,cells)

INPUTの欄の値をDOMにより取得して表示するコードの例です。下のボタンをクリックすると左から3列目のINPUTの値をポップアップで表示します。
ここでは「1.全セルの値の取得」と同じようにDOMに行オブジェクト、セルオブジェクトからfirstChildメソッドによりINPUTオブジェクトを取得しています。この場合はINPUTがTABLEのどの列か分かっている場合の方法です。INPUTオブジェクトより値を取得する方法は2つあり、1つはvalue属性による取得とgetAttributeメソッドによる取得方法です。(オブジェクトのメソッド/属性なのでDOM以外の方法でオブジェクトを取得した場合も同様です。)ここでは2通りの方法で取得した結果を表示しています。
注:ここではcells[2]と列を固定しているので、1行目のデータで「循環」ボタンを押して位置が変わっていた場合は、INPUTではない値が表示されます。

function showInputsByDOM(){
    var work1 ="color.value:";
    var work2 ='getAttribute("value"):';
    var shohin_table = document.getElementById("shohin_table");
    for ( var i = 1; i < shohin_table.rows.length; i++ ) {
        var color = shohin_table.rows[i].cells[2].firstChild;
        work1 += "," + color.value;
        work2 += "," + color.getAttribute("value");
    }
    alert(work1 + String.fromCharCode(13)+String.fromCharCode(10) + work2);
}

3.INPUTの値の取得(DOM name)

INPUTの欄の値をnameにより取得して表示するコードの例です。下のボタンをクリックするとポップアップで表示します。
ここではDOMのgetElementsByNameメソッドによりINPUTのname属性の値が"color"のオブジェクトを配列( = colors)に取得して、その値を前章と同様にvalue属性とgetAttributeメソッドによる2通りの方法で取得した結果を表示しています。
データが無くてもcolorsが作成され、データが無い場合はそのlengthの値が0になります。
但し、getElementsByNameで取得する場合は、nameの値が同じもの全てを取得するためINPUT以外のオブジェクトを取得する可能性があります。DOMによる取得でも一度の処理で配列に取得しているので、レスポンスの問題はありません。

function showInputsByName(){
    var work1 ="colors[i].value:";
    var work2 ='getAttribute("value"):';

    var colors = document.getElementsByName("color");
    if ( colors.length == 0 ) {
        alert('No data');
        return false;
    }
    for ( var i = 0; i < colors.length; i++ ) {
        work1 += "," + colors[i].value;
        work2 += "," + colors[i].getAttribute("value");
    }
    alert(work1 + String.fromCharCode(13)+String.fromCharCode(10) + work2);
}

4.INPUTの値の取得(FormName)

INPUTの欄の値をnameにより取得して表示するコードの例です。下のボタンをクリックするとポップアップで表示します。
ここではINPUTのname属性の値が"color"のINPUTオブジェクトを配列( = colors)に取得して、その値を前章と同様にvalue属性とgetAttributeメソッドによる2通りの方法で取得した結果を表示しています。
この場合FORMタグfashion内にあるINPUTオブジェクトのみが対象となります。前章までのDOMの場合FORMタグは不要でしたが、この場合はFORMタグが必須です。
FORMタグによるデータ取得の場合、データの有無によりcolorsの状態が異なるのでデータ数が既知でない(可変)場合は、使用する前にその状態をチェックする必要があります。
データが無い:colorsがnull。
データが1件:colorsは配列ではなく1つのオブジェクト。
データが2件以上:colorsはオブジェクトのList変数。
ここではテーブル内のデータが5行あるのでチェックは不要ですが、コードのサンプルとして記述しています。

function showInputsByFormName(){
    var work1 ="colors[i].value:";
    var work2 ='getAttribute("value"):';
    var colors = document.fashion.color;
    if ( colors == null ) {
        alert('No data');
        return false;
    } else if ( isArray(colors) == false ) {
        work1 = "colors.value:" + colors.value;
        work2 = 'getAttribute("value"):' + colors.getAttribute("value");
    } else {
        for ( var i = 0; i < colors.length; i++ ) {
            work1 += "," + colors[i].value;
            work2 += "," + colors[i].getAttribute("value");
        }
    }
    alert(work1 + String.fromCharCode(13)+String.fromCharCode(10) + work2);
}

上記でcolorsがListかどうか以下のisArray()関数を作成してチェックします。

isArray = function (vArg) {
    return !(vArg.length === undefined);
}

5.セルの値の取得(DOM name)

INPUTの場合と同様にTDタグのname属性によりDOMのgetElementsByNameを使用してTDオブジェクトを取得してinnerHTML属性の値を表示するコードの例です。但し、getElementsByNameで取得できるのは仕様としてINPUTタグだけでIEの場合TD、DIVなどのタグでは取得できません。 下のボタンをクリックするとIE以外の場合ポップアップで表示します。
ここではgetElementsByNameメソッドによりname属性の値が"price"のTDオブジェクトを配列( = prices)に取得して、そのinnerHTML属性の値を表示しています。

function showCellsByName(){
    var work ="";

    var prices = document.getElementsByName("price");
    if ( prices == null ) {
        alert("prices == null");
        return;
    }
    for ( var i = 0; i < prices.length; i++ ) {
        work +=prices[i].innerHTML + ",";
    }
    alert(work);
}

6.チェックボックスの値の取得(DOM rows,cells)

INPUTの場合と同様に(チェックボックスもINPUTタグ)DOMにより行オブジェクト、セルオブジェクトからfirstChildメソッドによりチェックボックス( = INPUT)オブジェクトを取得しています。 下のボタンをクリックすると左から2列目のチェックボックスの値をポップアップで表示します。
この場合はチェックボックスがTABLEのどの列でセル内の何番目にあるか分かっている場合の方法です。
チェックボックスの場合、valueの値とcheckedの値が必要です。ここではチェックボックスオブジェクトのvalue属性とchecked属性によりデータを取得して表示します。
checkedの値はgetAttributeメソッドでの取得ができない場合があります。

function showCheckboxByDOM(){
    var work1 ="objCell.value:";
    var shohin_table = document.getElementById("shohin_table");
    for ( var i = 1; i < shohin_table.rows.length; i++ ) {
        var objCell = shohin_table.rows[i].cells[1].firstChild;
        work1 += "," + objCell.value + "," + objCell.checked;
    }
    alert(work1);
}

7.チェックボックスの値の取得(DOM name)

INPUTの場合と同様にDOMのgetElementsByNameメソッドによりINPUTのname属性の値が"clothes"のオブジェクトをList( = clothes )に取得します。 この場合「6.チェックボックスの値の取得(DOM rows,cells)」のようにセル内に複数のタグがある場合、セル内で何番目にあるか気にする必要はありません。

function showCheckboxByName(){
    var work1 ="clothes[i].value:";
    var clothes = document.getElementsByName("clothes");
    if ( clothes.length == 0 ) {
        alert('No Checkbox');
        return false;
    }
    for ( var i = 0; i < clothes.length; i++ ) {
        work1 += "," + clothes[i].value + "," + clothes[i].checked;
    }
    alert(work1);
}

8.チェックボックスの値の取得(FormName)

INPUTの場合と同様にFORM内のINPUTのname属性の値が"clothes"のINPUTオブジェクトをList( = clothes)に取得し表示しています。
「4.INPUTの値の取得(FormName)」と同様に取得結果のclothes変数の状態のチェックが必要です。

function showCheckboxByFormName(){
    var work1 ="clothes[i].value:";
    var clothes = document.fashion.clothes;
    if ( clothes == null ) {
        alert('No Checkbox');
        return false;
    } else if ( isArray(clothes) == false ) {
        work1 = "clothes.value:" + clothes.value + "," + clothes.checked;
    } else {
        for ( var i = 0; i < clothes.length; i++ ) {
            work1 += "," + clothes[i].value + "," + clothes[i].checked;
        }
    }
    alert(work1);
}

ボタン 商品名 カラー 価格
Tシャツ 1000円
カーデガン 2000円
ポロシャツ 3000円
ネルシャツ 4000円
パーカー 5000円
 

以下TABLEに配置されたボタンをクリックし、その行のデータを変更するサンプルです。共通するのはボタンがクリックされた時にJavascript関数に渡すパラメータにthis( = INPUT(ボタン)オブジェクト)を指定して、そのオブジェクトから親のオブジェクトをINPUT -> TD -> TRとたどり行オブジェクトを取得し、その行オブジェクトからTR -> 対象TD -> 対象オブジェクトとたどります。
セル内に複数のオブジェクトがある場合、例えば3個ある場合は以下のように配列でアクセスします。最初と最後のオブジェクトはfirstChild/lastChildも使用できます。

objTR.cells[1].childNodes[0]; ( = firstChild )
objTR.cells[1].childNodes[1];
objTR.cells[1].childNodes[2]; ( = lastChild )

DOMにより処理しているので、FORMタグは不要です。

9.行のデータの読み書き

1行目の循環ボタンをクリックした時のコードです。
ボタンのオブジェクトからTRオブジェクトを取得し、その下にあるTDオブジェクトのinnerHTML属性を読み書きして循環させるサンプルです。

function roundCols(obj){
    var objTR = obj.parentNode.parentNode;

    var curt = objTR.cells[0].innerHTML;
    for ( var i = 1; i < 5; i++ ) {
        if ( i == 4 ) {
            j = 0;
        } else {
            j = i;
        }
        var nxt = objTR.cells[j].innerHTML;
        objTR.cells[j].innerHTML = curt;
        curt = nxt;
    }

}

10.行のチェックボックスの読み書き

2行目のCheckbox反転ボタンをクリックした時のコードです。
ボタンのオブジェクトからTRオブジェクトを取得し、TRオブジェクトのテーブルでの行番号を求めています。このサンプルでは行番号の使用方法を示すために
ボタン -> TD -> TR -> TABLE -> TR -> TD -> チェックボックス
と敢えてたどってチェックボックスオブジェクトを求めています。上記赤字の部分は本来不要です。
テーブルの始まりの行番号は0から始まります。このサンプルではタイトル行となります。

function flipCheckbox(obj){
    var objTR = obj.parentNode.parentNode;
    var number = objTR.rowIndex;
    var objTable= objTR.parentNode;

    var currentTR = objTable.rows[number];
    var checkBox = currentTR.cells[1].firstChild;
    
    checkBox.checked = !checkBox.checked;
}

TABLEまで遡らない以下のようになります。

function flipCheckbox(obj){
    var objTR = obj.parentNode.parentNode;
    var checkBox = objTR.cells[1].firstChild;

    checkBox.checked = !checkBox.checked;
}

11.行のINPUTの読み書き

3行目のINPUTボタンをクリックした時のコードです。
ここではINPUTオブジェクトのvalue属性に対して配列colorsの値を順番にセットしています。

var colorIdx = 0;
function inputOverwrite(obj){
    var colors = ["レッド","ブラウン","ブルー","ホワイト","グリーン"];

    var objTR = obj.parentNode.parentNode;

    var objInput = objTR.cells[2].firstChild;

    objInput.value = colors[colorIdx];
    colorIdx++;
    if ( colorIdx == colors.length ) {
        colorIdx =0;
    }
}

12.行のINPUTの読み書き(2)

4行目のINPUT2ボタンをクリックした時のコードです。
ここではINPUTオブジェクトに対してsetAttributeメソッドによりvalue属性に対して配列colorsの値を順番にセットしています。

var colorIdx = 0;
function inputOverwrite2(obj){
    var colors = ["レッド","ブラウン","ブルー","ホワイト","グリーン"];

    var objTR = obj.parentNode.parentNode;

    var objInput = objTR.cells[2].firstChild;

    objInput.setAttribute("value",colors[colorIdx]);
    colorIdx++;
    if ( colorIdx == colors.length ) {
        colorIdx =0;
    }
}

13.行のTextの読み書き

6行目のTEXTボタンをクリックした時のコードです。
ここではセル内に複数のオブジェクトがある場合childNodesによりTextのオブジェクトを取得し、nodeValue属性に対して配列clothesの値を順番にセットしています。

clothIdx = 0;
function textOverwrite(obj){
    var clothes = ["Tシャツ","カーデガン","ポロシャツ","ネルシャツ","パーカー"];

    var objTR = obj.parentNode.parentNode;

    var objText = objTR.cells[1].childNodes[1];

    objText.nodeValue = " " + clothes[clothIdx];
    clothIdx++;
    if ( clothIdx == clothes.length ) {
        clothIdx =0;
    }
}

最終更新のRSS
Last-modified: 2015-12-02 (水) 23:10:20 (959d)