< スポンサーリンク >

テーブルの行の背景色をマウスオーバーとクリックで変える

テーブルの行にマウスをのせたときと、クリックしたときにその行の背景色を変えるサンプルです。

 

テーブルの行にマウスをのせると背景色が緑になり、マウスをはなすと元の背景色に戻ります。

テーブルの行をクリックすると背景色が緑に固定されるようにしてみました。

 

<サンプル> 

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はまやらわ
まみむめも
やゆよ

 

<html>index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テーブル行の背景色</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="tr_background_color.js"></script>
</head>
<body>
<table id="tbl1">
<tr><td>あいうえお</td></tr>
<tr><td>かきくけこ</td></tr>
<tr><td>さしすせそ</td></tr>
<tr><td>たちつてと</td></tr>
</table>
<br />
<table id="tbl2">
<tr><td>なにぬねの</td></tr>
<tr><td>はまやらわ</td></tr>
<tr><td>まみむめも</td></tr>
<tr><td>やゆよ</td></tr>
</table>
</body>
</html>

 

<style>style.css

table{
 border-collapse: collapse;
 border-spacing: 5px;
}

td{
 border: 1px gray solid;
}

 

<JavaScirpt>tr_background_color.js

$(function(){
 tr_default("#tbl1");
 tr_default("#tbl2");
 $("#tbl1 tr").click(function(){
  tr_default("#tbl1");
  tr_click($(this));
 });
 $("#tbl2 tr").click(function(){
  tr_default("#tbl2");
  tr_click($(this));
 });
});

function tr_default(tblID){
 var vTR = tblID + " tr";
 $(vTR).css("background-color","#ffffff");
 $(vTR).mouseover(function(){
  $(this).css("background-color","#CCFFCC") .css("cursor","pointer")
 });
 $(vTR).mouseout(function(){
  $(this).css("background-color","#ffffff") .css("cursor","normal")
 });
}

function tr_click(trID){
 trID.css("background-color","#e49e61");
 trID.mouseover(function(){
  $(this).css("background-color","#CCFFCC") .css("cursor","pointer")
 });
 trID.mouseout(function(){
  $(this).css("background-color","#e49e61") .css("cursor","normal")
 });
}

 

< スポンサーリンク >



サブコンテンツ

このページの先頭へ