2014年03月28日

テーブルの行と列、ハイライト表示 javascript

スポンサード リンク

 テーブル要素 オンマウスで セル、行と列の背景色変更

表のセルにマウスポインタが乗った時、そのセル自身とその行と列を
ハイライト表示するJavaScriptです。

画像 スタイルシート 背景設定 テーブル
ドラッグ cssTextプロパティ 背景画像設置 表の作成
ロールオーバー text-align プロパティ 背景 プロパティ 行のハイライト
画像ポップアップ display プロパティ 背景画像入れ替え 表 表示/非表示
ローテーションバーナ marginプロパティ 背景 CSS 見出し行を固定
画像のプリロード borderプロパティ ツールチップ テーブルcss生成

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

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>ハイライト テーブル javascript</title>
<style type="text/css">
#TBL{
  background-color: #fffafa; /* 背景色 */
   border-collapse: collapse; /* 枠線の重なり:結合 */
  border: 2px solid #0000ff; /* ボーダー : 幅,線種,色 */
   }

#TBL thead {
  border-bottom:3px #0000ff double;
    }

#TBL th{
 color: #030303;
 background-color: #dbdbdb;
 padding: 5px 7px;  /* 余白:上下 左右;*/
 border:1px #0000ff solid;
  }

#TBL td{
 color:#800000;
 background-color:inherit; /* inherit 親要素の値を継承*/
 padding:5px 7px;
 border:1px #008000 solid;
  }
 </style>
 <script>
window.onload = hLightTBL;
function hLightTBL() {
 var Tbl =document.getElementById("TBL"); // <table> ID名
 var BgClr = "#d2e9ff"; // マウスが上に来た時の行、列の背景色
 var CellClr="pink";  // マウスが上に来た時のセルの背景色
		
for(var i=0;i<Tbl.rows.length;i++) {// 行 位置取得
 for(var j=0;j<Tbl.rows[i].cells.length;j++) { // 行内 セル位置取得
  Tbl.rows[i].cells[j].onmouseover = function(){ // マウスが重なったら cellTBLを実行
                cellTBL(this,BgClr,CellClr); //「this」現在マウスが重なっているtd要素
                                 }
  Tbl.rows[i].cells[j].onmouseout = function(){
                    cellTBL(this,'','');
                                 }
			     }
			}
	
function cellTBL(tgtCell,BgClr,CellClr) {
 for(var i=0;i<Tbl.rows.length;i++) {
  Tbl.rows[i].cells[tgtCell.cellIndex].style.backgroundColor = BgClr;// 列 背景色
	    }
  tgtCell.style.backgroundColor = CellClr;// セル 背景色
   tgtCell.parentNode.style.backgroundColor = BgClr;// 行 背景色
			}
		}
</script>
</head>
<body>
<table id="TBL">
<thead>
 <tr>
    <th>画像</th>
    <th>スタイルシート</th>
    <th>背景設定</th>
    <th>テーブル</th>
</tr>
</thead>
<tbody>
<tr>
    <td>ドラッグ</td>
      <td>cssTextプロパティ</td>
      <td>背景画像設置</td>
    <td>表の作成</td>
</tr>
  <tr>
      <td>ロールオーバー</td>
      <td>text-align プロパティ</td>
      <td>背景 プロパティ</td>
      <td>行のハイライト</td>
</tr>
   <tr>
      <td>画像ポップアップ</td>
      <td>display プロパティ</td>
      <td>背景画像入れ替え</td>
      <td>表 表示/非表示</td>
 </tr>
   <tr>
      <td>ローテーションバーナ</td>
      <td>marginプロパティ</td>
      <td>背景 CSS</td>
      <td>見出し行を固定</td>
  </tr>
    <tr>
      <td>画像のプリロード</td>
      <td>borderプロパティ</td>
      <td>ツールチップ</td>
      <td>テーブルcss生成</td>
    </tr>
  </tbody>
</table>
</body>
</html>
テーブル 行位置、セル位置、 取得
  var Tbl =document.getElementById("TBL");
Tbl.rowsはID名が "TBL"であるテーブルの rowsコレクションで、for文でループして
テーブル内の行の位置を得ます。
Tbl.rows[i]'i'が 0 なら一行目、1なら二行目、2なら三行目.......... になります。
Tbl.rows[i].cells[j]:rowsのcellsコレクションでテーブルの行内のセルの位置を得ます。
'j'が 0 ならi行目の一列目、1なら二列目、2なら三列目.......... になります。
  Tbl.rows[i].cells[j].cellIndexでマウスが重なった、セルのインデックス番号を取得し
同じインデックス番号を持つ、セルの背景色を変更します。
Table cellIndexプロパティ、セルのインデックス値の取得
cellIndex値
列-0 列-1 列-2 列-3
0 1 2 3
0 1 2 3
0 1 2 3
列ごとに "0" から始まるインデックス値が振られています。
テーブルのセルにアクセスする スクリプト
function Foge(){
 var Tbl = document.getElementById('TBL');
 for (var i=0; i<Tbl.rows.length; i++) { //テーブル内,行位置。
   for (var j=0; j<Tbl.rows[i].cells.length; j++) { //行内,セル位置。
  var Cells=Tbl.rows[i].cells[j]; //i番行のj番列のセル。
   Cells.onclick =function(){Mclk(this);} // onclickで 'Mclk'を実行。
                 }          // thisはクリックしたセル"Cells"を参照。
            }
        }
function Mclk(tgtCell){alert(tgtCell.innerHTML);}
posted by javaScript at 12:02 | 大阪 | テーブル | このブログの読者になる | 更新情報をチェックする

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 | 大阪 ☀ | テーブル | このブログの読者になる | 更新情報をチェックする
×

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