تغيير لون خلفية الخلية الحالية في جدول بإستخدام jQuery
السلام عليكم و رحمة الله و بركاته و تعالى
لنفرض مثلا أنه لديك جدول مكون من 5 حقول و أعمدة، و أنت تريد أن يتغير لون خلية التي فوقها مؤشر الفأرة، كيف ذلك؟
الأمر بسيط، سنستخدم jQuery لذلك، لدينا الطريقة (method في البرمجة الكائنية) hover التي تعني متى يكون مؤشر الفأرة فوق شيء ما، و الطريقة addClass لعمل تغيير الخلفية و ما إلى ذلك.
<!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=utf-8" />
<title></title>
<style type="text/css">
.highlight {
font-weight: bold;
color: #FF9933;
background-color: #99FF00;
}
</style>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('td').hover(
function() {
$(this).addClass('highlight');
},
function () {
$(this).removeClass('highlight');
}) ;
});
</script>
</head>
<body>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="400" cellpadding="3" cellspacing="3">
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/html_table_tutorial.cfm" target="_top">HTML Tables</a></p>
</body>
</html>
<code>
في السطر 18 قمنا بعمل select للوسم td، هذا يعني أننا نستهدف الخلايا، بعدها قمنا بمنادات الطريقة hover التي تأخذ وسيطين، الأول عندما يكون مؤشر الفأرة فوق العنصر و الثاني عندما نغير مؤشر الفأرة من العنصر.
السطر 20 قمنا بتغيير الخلية بإستخدام الكلاس highlight المعرف سابقا في السطر 8، this تعني العنصر الحالي الذي نحن فيه، في السطر 23 قمنا بحذف تأثير الكلاس على العنصر الحالي.
مصادر:
التصنيفات:برمجة
CSS, JavaScript, jQuery
