JavaScript テーブルの交互の行の色を変更し、マウスの前後の動きを追加してクリックする方法

JavaScript テーブルの交互の行の色を変更し、マウスの前後の動きを追加してクリックする方法_javascript スキル

WBOY

リリース： 2016-05-16 16:04:47

オリジナル

1911 人が閲覧しました

この記事の例では、JavaScript テーブルの交互の行の色を変更し、マウスの出入りとクリック効果を追加する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

テーブルは 1 行おきに色を変更します。これも、ユーザーエクスペリエンスを向上させる JS 効果です。

効果の実装:

テーブルの奇数行と偶数行の色が異なります。これにより、ユーザーはデータをシリアルに表示できなくなります。
マウスが行内に移動すると色が変化し、マウスが行外に移動すると色が元に戻ります。これにより、ユーザーは自分がどの行を見ているのかを明確に知ることができます。

表をクリックして色を変更します。ユーザーにとって、保存したい項目を選択するのに便利です。

説明:

i%2 2 を法とする各数値には 0 と 1 の 2 つの値のみがあるため、インターレースによる色変更の効果を実現できます
tables_li[i].onoff = 1; クリック色の変更を実現するために、マウスが出入りしても色は上書きされません。

アップロードコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<style>
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
 var tables = document.getElementById("tables");
 var tables_li = tables.getElementsByTagName("tr");
 var i=0;
 var len = tables_li.length;
 for(i=0; i<len; i++){
  tables_li[i].onoff = 1;
  tables_li[i].index = i;
  tables_li[i].style.backgroundColor = i%2&#63;"#ace":"";
  tables_li[i].onmouseover = function(){
   if(this.onoff == 1){
   this.style.backgroundColor = "#06c";
   }
  }
  tables_li[i].onmouseout = function(){
   if(this.onoff == 1){
    this.style.backgroundColor = this.index%2&#63;"#ace":"";
   }
  }
  tables_li[i].onclick = function(){
   if(this.onoff == 1){
    this.onoff = 0;
    this.style.backgroundColor = "#069";
   }else{
    this.onoff = 1;
    this.style.backgroundColor = this.index%2&#63;"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
 <tr>
 <td>1</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>2</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>3</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>4</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>5</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>6</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>7</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>8</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>9</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>10</td>
 <td>内容内容</td>
 </tr>
</table>
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。