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月24日

テーブルのCSS設定、コード自動生成ツール

スポンサード リンク

 テーブル要素 CSS生成ツール
<table><th><td>要素のCSSを自動作成します。

スタイルシートでテーブルをデザイン。文字色,背景色,や枠線のプロパティ値を
変更して、色々なスタイルのテーブルを即座に生成します。それに対応する
CSSコードも出力するのでコピーして使ってください。
       表
<TABLE>
背景色  罫線: 重なり
罫線: 幅 px   色  線種  間隔 px
 見出しセル
    <TH>   
文字色 背景色 余白:上下 px  左右 px
罫線: 幅  線種
  データセル
     <TD>
文字色 背景色 余白:上下 px  左右 px
罫線: 幅 px   色  線種

Preview Table
行1-列1 行1-列2 行1-列3 行1-列4
行2-列1 行2-列2 行2-列3 行2-列4
行3-列1 行3-列2 行3-列3 行3-列4
行4-列1 行4-列2 行4-列3 行4-列4



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

テーブル CSS
Preview Table
<TH>見出しセル 見出しセル-列2 見出しセル-列3
<TD>データセル 行2-列2 行2-列3
行3-列1 行3-列2 行3-列3

設定したプロパティがテーブルのタグ <table>,<th>,<td> で、どの様に見えるか
視認し易いように派手派手にしています。

<table>
background-color: #FFFF00;  // テーブルの背景色:黄色
border-collapse: separate;  // 枠線の重なり: 分離;
border-spacing: 15px 5px; // 枠線の間隔:"左右" "上下";
border: 15px  #C0C0C0  ridge; // 枠線:幅、色は銀色、ridgeで額縁のように ;
<th>
color: #FFFFFF; // 文字色:白色
background-color: #800080;  // 背景色:紫色
padding: 5px  7px;  // 余白:上下 左右;
border: 5px  #00FFFF  solid;  // 枠線:幅、色は水色、solidで実線;
<td>
color: #800000; // 文字色: 茶色
background-color: #FFFFFF;  // 背景色:白色
padding: 5px  7px;  // 余白:上下 左右;
border: 10px  #008000  solid;  // 枠線:幅、色は緑色、solidで実線;
border-collapse プロパティ
隣会うセルとのボーダー(枠線)の表示モデルを設定します。
border-collapse:collapse;隣接するセルの枠線を重ねて表示する。
border-collapse:separate;隣接するセルの枠線を分離して表示する。(初期値)
border-spacing プロパティ
隣接するセルのボーダー(枠線)の間隔(値は px; など)を指定します。
border-spacing:値1; "上下左右" を纏めて指定。
border-spacing:値1 値2; "左右" "上下"を分けて指定。
 このプロパティはborder-collapseの値がseparate;であれば有効です。
posted by javaScript at 23:07 | 大阪 | Webツール | このブログの読者になる | 更新情報をチェックする
×

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