2014年03月09日

tableの行,列を 追加,削除 javascript

スポンサード リンク

 〔insertRow/deleteRowメソッド:行,挿入/削除
  insertCell/deleteCellメソッド:セル,挿入/削除〕

HTML メソッド
<TR>要素 insertRow( )
<TD>要素 insertCell( )

イオンのオンラインショッピングサイト 〜 おうちでイオン イオンショップ 〜
★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>tableの行,列を 追加,削除 javascript</title>
 <style type="text/css">
                  /* 表の装飾は簡略化しています */
  #myTBL{
          border: 1px solid #5caadb; /* ボーダー : 幅,線種,色 */
	   border-collapse: collapse;
		}
#myTBL thead th,
#myTBL tbody td { 
         border: 1px solid #5caadb;
         padding: 5px; 
              } 
 </style>
<script>
  function addRow(){  // 行追加
   var tblObj = document.getElementById("myTBL"); // tblObj 対象のテーブル
    var rowCnt = tblObj.rows.length; // テーブルの行数
     var colCnt = tblObj.rows[0].cells.length; // 行内セルの数 
      var row = tblObj.insertRow(rowCnt); // 行の末尾に,新規行を追加
    for (var i = 0; i < colCnt; i ++) { // セルの数だけループして
     var cell = row.insertCell(i);// 追加した行にセルを挿入
      cell.innerHTML = "行"+rowCnt+"-列"+i; // 行,セルIndex値 表示
       }
    }

function delRow(){    // 行削除 
 var tblObj = document.getElementById("myTBL");
  var rowCnt = tblObj.rows.length; // 行数
   if(rowCnt==2){alert("これ以上削除できません。");return;}
    tblObj.deleteRow(-1);// 末尾行を削除
    }

function addColumn(){ // 列追加 
 var tblObj=document.getElementById("myTBL");
  var rowCnt = tblObj.rows.length; // 行数
   var colCnt = tblObj.rows[0].cells.length; // 行内セルの数
    var th = document.createElement( 'th' ); // <TH>要素を生成
      tblObj.rows[0].appendChild( th ); // 一行目に<TH>を付加
       tblObj.rows[0].cells[colCnt].innerHTML= " 行0-列"+colCnt; // セル内容
         for(var i=1;i<rowCnt;i++){// 行数だけループして
           tblObj.rows[i].insertCell(-1);// 行をループしてセルを末尾に追加
            tblObj.rows[i].cells[colCnt].innerHTML= " 行"+i+"-列"+colCnt; // セル内容
                    	 }
  		  }

function delColumn(){ // 列削除
  var tblObj=document.getElementById("myTBL");
   var rowCnt = tblObj.rows.length; // 行数
    var colCnt = tblObj.rows[0].cells.length;  // 行内セルの数
       if(colCnt==1){alert("これ以上削除できません。");return;}
         for(var i=0;i< rowCnt;i++){// 行数だけループして
          tblObj.rows[i].deleteCell(-1); // 行内セルを末尾から順に削除
                 }
             }

</script>
</head>
<body>
   <p> 
     <input type="button" value="1行挿入" onclick="addRow()" />
     <input type="button" value="1行削除" onclick="delRow()" />
     <input type="button" value="1列挿入" onclick="addColumn()" />
     <input type="button" value="1列削除" onclick="delColumn()" />
  </p>
 <table id="myTBL" border="1">
   <thead>
    <tr>
     <th>HTML</th>
     <th>メソッド</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td>&lt;TR&gt;要素</td>
    <td>insertRow( )</td>
   </tr>
   <tr>
    <td>&lt;TD&gt;要素</td>
    <td>insertCell( )</td>
   </tr>
 </tbody>
 </table>
</body>
</html>
rowsプロパティ
指定したテーブルの行コレクションの配列を返します。
HTML DOM Table rows,cellsコレクション
構文
RowsCollection=tblObj.rows;  // tblObj の行コレクション
行数を取得   : tblObj.rows.length;
最初の行を取得: tblObj.rows[0];// index値は”0”から始まる。
最後の行を取得:  tblObj.rows[ tblObj.rows.length - 1 ];
cellsプロパティ
指定した表のセルのコレクションの配列を返します。
構文
CellCollection=tblObj.cells;  // tblObj のセルコレクション
最初の行のセル数を取得: tblObj.rows[0]cells.length;
二行目,三番目のセルを取得: tblObj.rows[1].cells[2];// index値は”0”から始まる。
insertRowメソッド / deleteRowメソッド
指定したテーブルに1行挿入 / 1行削除。
構文
行挿入:tblObj.insertRow(index);
行削除:tblObj.deleteRow(index);
index値は挿入・削除する行番号を指定します。
index値に "-1"を指定すると最終行になります。
insertCellメソッド / deleteCellメソッド
テーブルの指定行にセルを挿入 / 削除。
構文
セル挿入:tblObj.rows[i].insertCell(index);
セル削除:tblObj.rows[i].deleteCell(index);
index値は挿入・削除するセル番号を指定します。
index値に "-1"を指定すると行内最後のセルになります。
insertCellメソッドは<TD>要素を返すので、表の一行目を見出しセル<TH>に
するにはdocument.createElement()で<TH>要素を生成します。
var th = document.createElement( 'th' ); // <TH>要素を生成
tblObj.rows[0].appendChild( th );
// 一行目に<TH>を付加

DOM 要素の生成、削除


posted by javaScript at 15:13 | 大阪 ☀ | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。