テーブル要素 オンマウスで セル、行と列の背景色変更
表のセルにマウスポインタが乗った時、そのセル自身とその行と列を
ハイライト表示するJavaScriptです。
ハイライト表示するJavaScriptです。
| 画像 | スタイルシート | 背景設定 | テーブル |
|---|---|---|---|
| ドラッグ | cssTextプロパティ | 背景画像設置 | 表の作成 |
| ロールオーバー | text-align プロパティ | 背景 プロパティ | 行のハイライト |
| 画像ポップアップ | display プロパティ | 背景画像入れ替え | 表 表示/非表示 |
| ローテーションバーナ | marginプロパティ | 背景 CSS | 見出し行を固定 |
| 画像のプリロード | borderプロパティ | ツールチップ | テーブルcss生成 |
★☆★☆★☆ ナウでヤングなレンタルサーバー！ロリポップ！ ☆★☆★☆★
月額１０５円〜容量最大１２０ＧＢ！大人気の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'が ０ なら一行目、１なら二行目、２なら三行目.......... になります。Tbl.rows[i].cells[j]：rowsのcellsコレクションでテーブルの行内のセルの位置を得ます。'j'が ０ ならi行目の一列目、１なら二列目、２なら三列目.......... になります。Tbl.rows[i].cells[j].cellIndexでマウスが重なった、セルのインデックス番号を取得し同じインデックス番号を持つ、セルの背景色を変更します。
Table cellIndexプロパティ、セルのインデックス値の取得
- cellIndex値
-
列ごとに "0" から始まるインデックス値が振られています。列-0 列-1 列-2 列-3 0 1 2 3 0 1 2 3 0 1 2 3 - テーブルのセルにアクセスする スクリプト
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);}
- ★月々100円（税抜）からオンラインショップを運営！
独自SSL・高機能カート・クレジット決済が簡単導入
- コロリポプラン 詳細はこちら
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- テーブルのCSS設定、コード自動生成ツール
- 文字の色,背景色の色の組み合わせのチェック
- Web Safeカラー 216色
- テーブル クリックしたセルの行位置,列位置,内容の取得
- HTML テーブル( 表 ) の作成。
- CSS でヘッダ固定、データ行を スクロールさせるテーブル
- colgroup 要素 表の列をグループ化
- Table cellIndexプロパティ、セルのインデックス値の取得
- テーブル border-collapseプロパティ CSS
- テーブルの罫線
- table-layoutプロパティ CSS テーブル
- HTML DOM Table rows,cellsコレクション
- テーブル table のセルを結合します。
- 表 table のセル内で行を自動改行させない
- テーブルの表題を固定してデータ部分だけをスクロールさせる。
- テーブルの行の背景色を一行おきに変えます。 javascript
- テーブルの行の文字色,背景色を変えてハイライトします。
- javascript テーブル 列の背景色 変更 cellIndexプロパティ
- テーブルの行とセルをCSSだけでハイライト
- tableの行,列を 追加,削除 javascript
