|
 |
| |
โค้ดอะไรเมาส์ชี้ที่แถว แล้ว bg table เปลี่ยนสีครับ |
| |
 |
|
|
 |
 |
|
ขอบคุณครับ...
|
 |
 |
 |
 |
| Date :
2010-09-16 13:08:38 |
By :
yUmzA |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ผมเรียกมันว่าตาราง ม้าลาย ครับ
jquery zebra table
http://www.mkyong.com/jquery/how-to-create-a-table-zebra-stripes-effect-jquery/
|
| |
|
|
| |
| Date :
2010-09-16 13:27:56 |
By :
peterxp |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ทำไมจะไปเปลี่ยนสีทั้ง table ละครับ ที่นิยมทำคือเปลี่ยนเฉพาะแถวที่เม้าส์ overอยู่ครับ แต่ก็ทำได้ครับ ใช้ CSS โดยเฉพาะ IE 7 firefox chrome ไม่ต้องใช้ javascript ด้วยซ้ำ IE เก่ากว่านั้นใช้ javascript ช่วย แต่ผมว่าเขียนสำหรับ browser สมัยใหม่เลยดีกว่า
เปลี่ยนสีพื้นของแถว ใช้ tr:hover {background-color: #FFFF00;}
เปลี่ยนสีพื้นทั้งตาราง table:hover {background-color: #FFFF00;}
ตัวอย่าง
Code (JavaScript)
<html><head>
<title></title>
<style>
tr:hover {background-color: #FFFF00;}
</style>
</head>
<body >
<table><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr></table>
|
| |
|
|
| |
| Date :
2010-09-16 13:34:18 |
By :
สกล |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ใช้ css:event ไม่แน่ใจว่า ie จะทำงานป่าวนะ บางทีกระตุก
|
| |
|
|
| |
| Date :
2010-09-16 13:40:04 |
By :
pjgunner.com |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
$(document).ready(function() {
$("#gridview tbody tr:odd").addClass("odd");
$("#gridview tbody tr:even").addClass("even");
$("#gridview thead tr").addClass("head");
$(document).ready(function() {
$("#gridview tr.odd").mouseover(function(e) {
$(this).removeClass("odd").addClass("over");
}).mouseout(function(e) {
$(this).removeClass("over").addClass("odd");
});
$("#gridview tr.even").mouseover(function(e) {
$(this).removeClass("even").addClass("over");
}).mouseout(function(e) {
$(this).removeClass("over").addClass("even");
});
});
<style type="text/css">
table#gridview {
clear:both;
}
table#gridview td {
padding:3px 0px;
}
table#gridview tr.head {
background:#ccc;
font:bold 12px Tahoma, Geneva, sans-serif;
text-align:center;
}
table#gridview tr.head td {
padding:8px 0px;
}
table#gridview tr.odd {
background:#f5f5f5;
}
table#gridview tr.even {
background:#eee;
}
table#gridview tr.over {
background:#fcf;
}
</style>
<table width="100%" border="0" cellspacing="1" cellpadding="2" id="gridview">
<thead>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tbody>
</table>
จัดไป Style jQuery
|
| |
|
|
| |
| Date :
2010-09-16 14:31:01 |
By :
PlaKriM |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
