الرئيسية > برمجة > تغيير لون خلفية الخلية الحالية في جدول بإستخدام jQuery

تغيير لون خلفية الخلية الحالية في جدول بإستخدام 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 قمنا بحذف تأثير الكلاس على العنصر الحالي.

مصادر:

jQuery hover

Table generator

التصنيفات :برمجة الوسوم:, ,
  1. لا يوجد تعليقات.
  1. No trackbacks yet.

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: