ロト君のサイト

ロト君のサイトby lotokunn

L'sCore ロト君のサイトへようこそ!


ボタンを押したら背景色を変える

2017.06.20

皆さん今日は!ロト君です。
Google先生に聞いてもなかなか正解を導いてくれなかったのでメモを残したいと思います。

<!-- バージョンは2を使っています。外部読み込みを忘れないように -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//background-color
$(function() {
 $("button").click(function() {
 btn_id=$(this).attr("id");//該当ボタンで設定しているid名を取得
 $("td").css("background", "");//連続して使う場合に前回の背景色を消す
 $("."+btn_id).css("background", "#DCFAFF");//該当セルの背景色を変更
 });
});
</script>

<table>は下記の通りです。


<!-- 背景色を付けるtable -->
<table>
<tr>
<td class="1">1</td>
<td class="2">2</td>
<td class="3">3</td>
</tr>
<tr>
<td class="4">4</td>
<td class="5">5</td>
<td class="6">6</td>
</tr>
<tr>
<td class="7">7</td>
<td class="8">8</td>
<td class="9">9</td>
</tr>
</table>

<!-- ボタン -->
<div>
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
<button id="5">5</button>
<button id="6">6</button>
<button id="7">7</button>
<button id="8">8</button>
<button id="9">9</button>
</div>

<button>のid名<td>のclass名が同じである必要があります。
本日はここまで!またどうぞ!(・ω・)ノシ

 



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、
どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter:ロト君@lotokunn

lotokunn.com by lotokunn

2016-2018 / Thanks for 2 years.