Javascript進級編——まとめ--DOMケース+タブ効果
48266 ワード
断続的にあこがれの授業のJavaScript基礎と階段を読み終わって、期間はあまり使わないであるものはすべて忘れて、続いて多くいくつか効果を書いて、実際の応用を行います.
表を作って、クラスの学生情報を表示します.
1.マウスを同業者に移動させないと背景色を色に変えます.マウスを離すと元の背景色に戻ります.
2.追加ボタンをクリックして、最後の行に動的に追加できます.
3.削除ボタンをクリックすると、現在の行を削除します.
タブの効果:
表を作って、クラスの学生情報を表示します.
1.マウスを同業者に移動させないと背景色を色に変えます.マウスを離すと元の背景色に戻ります.
2.追加ボタンをクリックして、最後の行に動的に追加できます.
3.削除ボタンをクリックすると、現在の行を削除します.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title> new document </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6 <script type="text/javascript">
7 window.onload = function(){
8 Highlight();
9 }
10 function Highlight(){
11 // , 。
12 var tbody = document.getElementById('table').lastChild;
13 var trs = tbody.getElementsByTagName("tr");
14 for(var i = 1; i < trs.length; i++){
15 trs[i].onmouseover = function(){
16 this.style.background = "#f2f2f2";
17 }
18
19 trs[i].onmouseout = function(){
20 this.style.background = "#fff";
21 };
22 };
23 };
24
25 // ， ， ；
26 function addOne(){
27 var tbody = document.getElementById("table").lastChild;
28 var tr = document.createElement("tr");
29
30 var td = document.createElement("td");
31 td.innerHTML = ("<input type='text'/>");
32 tr.appendChild(td);
33
34 var td = document.createElement("td");
35 td.innerHTML = ("<input type='text'/>");
36 tr.appendChild(td);
37
38 var td = document.createElement("td");
39 td.innerHTML = ("<a onclick='delet(this)' href='javascript:;' > </a>");
40 tr.appendChild(td);
41
42 tbody.appendChild(tr);
43 Highlight();
44 }
45
46 //
47 function delet(ss){
48 var tbody = document.getElementById("table").lastChild;
49 var tr = ss.parentNode.parentNode;
50 tbody.removeChild(tr);
51 }
52 </script>
53 </head>
54 <body>
55 <table border="1" width="50%" id="table">
56 <tr>
57 <th> </th>
58 <th> </th>
59 <th> </th>
60 </tr>
61 <tr>
62 <td>xh001</td>
63 <td> </td>
64 <td><a onclick="delet(this)" href="javascript:;" > </a></td> <!-- -->
65 </tr>
66 <tr>
67 <td>xh002</td>
68 <td> </td>
69 <td><a onclick="delet(this)" href="javascript:;" > </a></td> <!-- -->
70 </tr>
71 </table>
72 <input type="button" value=" " onclick="addOne()" /> <!-- -->
73 </body>
74 </html>タブの効果:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title> - </title>
6 <style type="text/css">
7 /* CSS */
8 *{ padding: 0; margin: 0; }
9 ul li{ list-style: none; }
10 #tabs{ width: 276px; margin-left: 50px;}
11 #tabs .tabs_title{ border-bottom: 2px solid #8B4513; height: 32px;}
12 #tabs .tabs_title li{ float: left; display: inline-block; background: #fff; width: 80px; line-height: 30px; text-align: center; border: 1px solid #eeefef; border-bottom: none; margin-right: 10px; cursor: pointer;}
13 #tabs .tabs_title .on{ border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF; }
14 #tabs div{ border: 1px solid #7396b8; border-top: none; line-height: 38px; }
15 #tabs .tabs_hide{ display: none; }
16 </style>
17 <script type="text/javascript">
18 // JS
19 window.onload = function(){
20 var tabs = document.getElementById("tabs");
21 var tabs_ul = tabs.getElementsByTagName("ul")[0];
22 var tabs_li = tabs_ul.getElementsByTagName("li");
23 var tabs_main = tabs.getElementsByTagName("div");
24 for (var i = 0 , len = tabs_li.length; i < len; i++) {
25 tabs_li[i].index = i;
26 tabs_li[i].onclick = function(){
27 for(var n = 0; n < len; n++){
28 tabs_li[n].className = "";
29 tabs_main[n].className = "tabs_hide";
30 }
31 this.className = "on";
32 tabs_main[this.index].className = "";
33 }
34 }
35 }
36 </script>
37 </head>
38 <body>
39 <!-- HTML -->
40 <div id="tabs">
41 <ul class="tabs_title">
42 <li class="on"> </li>
43 <li> </li>
44 <li> </li>
45 </ul>
46 <div>
47 <p>275 20 </p>
48 <p>200 140 </p>
49 <p> 53 5 50 </p>
50 <p> 5000 </p>
51 </div>
52 <div class="tabs_hide">
53 <p>40 </p>
54 <p> 90 </p>
55 <p> 66 </p>
56 <p> </p>
57 </div>
58 <div class="tabs_hide">
59 <p> 3 260 2 250w </p>
60 <p> 3 2 290 130 2 </p>
61 <p> 260 121 70 !</p>
62 <p> 280 2 248 </p>
63 </div>
64 </div>
65 </body>
66 </html>