![[a羅針盤]](image/pukiwiki.png "[a羅針盤]")
テーブルデータの読み書き †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.全セルの値の取得 †全セルの値を取得して表示するコードの例です。下のボタンをクリックするとポップアップで表示します。 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の値をポップアップで表示します。 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により取得して表示するコードの例です。下のボタンをクリックするとポップアップで表示します。 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により取得して表示するコードの例です。下のボタンをクリックするとポップアップで表示します。 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以外の場合ポップアップで表示します。 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列目のチェックボックスの値をポップアップで表示します。 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)に取得し表示しています。 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);
}
以下TABLEに配置されたボタンをクリックし、その行のデータを変更するサンプルです。共通するのはボタンがクリックされた時にJavascript関数に渡すパラメータにthis( = INPUT(ボタン)オブジェクト)を指定して、そのオブジェクトから親のオブジェクトをINPUT -> TD -> TRとたどり行オブジェクトを取得し、その行オブジェクトからTR -> 対象TD -> 対象オブジェクトとたどります。 objTR.cells[1].childNodes[0]; ( = firstChild ) objTR.cells[1].childNodes[1]; objTR.cells[1].childNodes[2]; ( = lastChild ) DOMにより処理しているので、FORMタグは不要です。 9.行のデータの読み書き †1行目の循環ボタンをクリックした時のコードです。 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反転ボタンをクリックした時のコードです。 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ボタンをクリックした時のコードです。 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の読み書き（２） †4行目のINPUT2ボタンをクリックした時のコードです。 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ボタンをクリックした時のコードです。 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;
}
}
 Last-modified: 2015-12-02 (水) 23:10:20 (3066d)
|
