مثال على مشاركة رمز لون خلفية جدول تعديل جافا سكريبت

انسخ رمز الكود كما يلي:

<أتش تي أم أل>

<النص البرمجي>

// قم بتعيين لون الصف الحالي عند النقر فوق الصف المحدد حاليًا، واستعادة الألوان وأحداث الماوس للصفوف الأخرى غير الصف الحالي.

وظيفة تحديد الصف (الهدف)

{

فار sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) // اجتياز جميع الصفوف باستثناء الصف الأول

{

if (sTable.rows[i] != target) // تحديد ما إذا كان الصف محددًا حاليًا أم لا

{

sTable.rows[i].bgColor = "#ffffff"; // تعيين لون الخلفية

sTable.rows[i].onmouseover = ResumeRowOver; // أضف حدث onmouseover

sTable.rows[i].onmouseout = ResumeRowOut;// إضافة حدث onmouseout

}

آخر

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = ""; // إزالة أحداث الماوس

sTable.rows[i].onmouseout = ""; // إزالة أحداث الماوس

}

}

}

// لون خلفية tr عند نقلها

صف الدالة (الهدف)

{

target.bgColor='#e4e4e4';

}

// لون خلفية tr عند الخروج

صف الدالة (الهدف)

{

target.bgColor='#ffffff';

}

// استعادة حدث onmouseover الخاص بـ tr الذي يدعم وظيفة الاتصال

وظيفة استئنافRowOver ()

{

RowOver(this);

}

// استعادة حدث onmouseout الخاص بـ tr الذي يدعم وظيفة الاتصال

وظيفة استئنافRowOut ()

{

RowOut(this);

}

</script>

<الجسم>

<div onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">بالنسبة للوظيفتين الأخيرتين استئنافRowOver وresumeRowOut، يرجى الرجوع إلى ما كتبته من قبل هل ترغب في إضافة جدول مطابق للحدث إلى عنصر الصفحة من خلال نسخة js HTMLview العادية إلى الحافظة؟

</div>

<جدول تباعد الخلايا = "1" cellpadding = "0" id = "ServiceListTable">

<تر>

<th>أهمية الخدمة</th>

<ث>ن</ث>

<th>الحالة</th>

<th>مغلق</th>

<th>المعلومات</th>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>محتوى ذو صلة</td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>محتوى ذو صلة</td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>محتوى ذو صلة</td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>محتوى ذو صلة</td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

<td align="center"></td>

</tr>

</الجدول>

</الجسم>

</html>