ウィリアムのいたずらの開発日記

ウィリアムのいたずらが、コンピューター関係について、思ったことを好き勝手に書いているブログです。

Domによる表操作:tableとtrの間にtbodyがあるんですね!(Domのお勉強その3)

2006-06-19 17:15:53 | JavaとWeb

 Domのお勉強の続きです。表枠で、行をたしたり、削除したりすることをしてみました。

 ここの本
 Ajax 実装のための基礎テクニック
 をみて、知りました。

 テーブルのとき、tableとtrの間にtbodyっていうのがあって、domで操作しようとするとき、これがないと、だめみたい!(たしかに、tableの下にappendChildでtrをしたら、できなかった)
 上記の本では、tbodyをdomでappendChildしてましたが、下の例では、tbodyタグを書いて、やってみました。

 で、ソースはこんなかんじ 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Domのお勉強その3:表</title>

<script language="javascript" type="text/javascript">
//============================================================//
//					                //
//	Domのお勉強その3:表	                //
//					                //
//============================================================//

//行数
var number = 0;

//---------------------------------------//
//	追加の場合		    //
//---------------------------------------//
function addItem()
{

  // 行数をたしてみる
  number ++;

  //=====================================//
  //	段落の文字を書き換える	    //
  //=====================================//
  document.getElementById('midashi').firstChild.nodeValue = "行数:"+ number; 

  //=====================================//
  //	行を追加する		         //
  //=====================================//
 //	追加する段落のテキスト生成する
  var newtr = document.createElement('tr');
  newtr.id = 'item' + number;
 document.getElementById('table').appendChild(newtr);


  //=====================================//
  //	ノードに文字を追加する	    //
  //=====================================//
  var newtd = document.createElement('td');
  newtr.appendChild(newtd);
 var mojiretu = document.createTextNode('追加した段落' + number);
  newtd.appendChild(mojiretu);

  //=====================================//
  //	ノードに画像を追加する	    //
  //=====================================//
  newtd = document.createElement('td');
  newtr.appendChild(newtd);
 var image = document.createElement('img');
  image.src = "http://www.geocities.jp/xmldtp/aj_testimg_new.jpg";
  newtd.appendChild(image);

  //=====================================//
  //	ノードにチェックボックス        //
  //=====================================//
  newtd = document.createElement('td');
  newtr.appendChild(newtd);
 var chk = document.createElement('input');
  chk.type   = "checkbox";
  chk.id     = "test"+ number;
  chk.value  = number;
  newtd.appendChild(chk);

}

//---------------------------------------//
//	削除の場合		    //
//---------------------------------------//
function delItem() 
{
  // 一応チェックなんかしてみる
  if(number == 0)
 {
    alert('削除できる段落がありません。');
    return;
  }

  //=====================================//
  //	最後の段落を削除する	    //
  //=====================================//
  var table = document.getElementById('table');
  table.removeChild(table.lastChild);

  //  段落数の修正
  number --;

  //=====================================//
  //	段落の文字を書き換える	    //
  //=====================================//
  document.getElementById('midashi').firstChild.nodeValue = "段落数:"+ number; 


}

//---------------------------------------//
//	チェックの場合		    //
//---------------------------------------//
function chkItem() 
{
 
  //=====================================//
  //	チェックされてる番号表示      //
  //=====================================//
  for(i = 1 ; i <= number ; i ++ )
  {
       if ( document.getElementById('test'+i).checked == true )
       {
          alert(document.getElementById('test'+i).value);
       }
  }
}

//==========================ここまでJavaScript=============================//

</script>
</head>

<body id="by">
    <input type="button" name="addBtn" value="追加" onclick="addItem()" /> 
    <input type="button" name="delBtn" value="削除" onclick="delItem()" />
    <input type="button" name="chkBtn" value="選択番号" onclick="chkItem()" />
    <p id="midashi">レコード数</p>
    <table border=1>
        <tbody id="table">
        </tbody>
   </table>
</body>

</html>

(上記の < > は実際には半角です。tbodyのところを赤字にしてみました)

 ということで、気が向いたら、説明というか、まとめの文を書くかも。。
 (書く必要もないか。。)

『テクノロジー』 ジャンルのランキング
この記事についてブログを書く
この記事をはてなブックマークに追加
« Domで、文字、画像、チェック... | トップ | モデルブログは、クリックア... »
最近の画像もっと見る

あわせて読む