كيف يمكنني تمييز صف الجدول باستخدام النموذج الأولي؟

Question

كيف يمكنني استخدام مكتبة النموذج الأولي وإنشاء جافا سكريبت غير مزعج لإدخال أحداث onmouseover وonmouseout في كل صف، بدلاً من وضع جافا سكريبت في كل علامة صف في الجدول؟

ستكون الإجابة باستخدام مكتبة النموذج الأولي (بدلاً من mootools وjQuery وما إلى ذلك) مفيدة للغاية.

Answer 1

<table id="mytable">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Bork</td><td>Bork</td></tr>

    </tbody>
</table>

<script type="text/javascript">

$$('#mytable tr').each(function(item) {
    item.observe('mouseover', function() {
        item.setStyle({ backgroundColor: '#ddd' });
    });
    item.observe('mouseout', function() {
        item.setStyle({backgroundColor: '#fff' });
    });
});
</script>

Answer 2

يمكنك استخدام النموذج الأولي addClassName و removeClassName طُرق.

قم بإنشاء فئة CSS "hilight" التي ستطبقها على hilighted <tr>'س.ثم قم بتشغيل هذا الكود عند تحميل الصفحة:

var rows = $$('tbody tr');  
for (var i = 0; i < rows.length; i++) {  
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); }  
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); }  
}

Answer 3

حل عام قليلاً:

لنفترض أنني أريد الحصول على طريقة بسيطة لإنشاء جداول تحتوي على صفوف يتم تمييزها عندما أضع مؤشر الماوس فوقها.في العالم المثالي، سيكون هذا أمرًا سهلاً للغاية، مع قاعدة CSS بسيطة واحدة فقط:

tr:hover { background: red; }

لسوء الحظ، الإصدارات الأقدم من IE لا تدعم محدد التمرير على عناصر أخرى غير A.لذلك علينا استخدام جافا سكريبت.

في هذه الحالة، سأحدد فئة جدول "قابلة للتمييز" لوضع علامة على الجداول التي يجب أن تحتوي على صفوف قابلة للتمرير.سأقوم بتبديل الخلفية عن طريق إضافة وإزالة فئة "تسليط الضوء" على صف الجدول.

CSS

table.highlightable tr.highlight { background: red; }

جافا سكريبت (باستخدام النموذج الأولي)

// when document loads
document.observe( 'dom:loaded', function() {
    // find all rows in highlightable table
    $$( 'table.highlightable tr' ).each( function( row ) {
        // add/remove class "highlight" when mouse enters/leaves
        row.observe( 'mouseover', function( evt ) { evt.element().addClassName( 'highlight' ) } );
        row.observe( 'mouseout', function( evt ) { evt.element().removeClassName( 'highlight' ) } );
    } );
} )

لغة البرمجة

كل ما عليك فعله الآن هو إضافة فئة "Highlightable" إلى أي جدول تريده:

<table class="highlightable">
    ...
</table>

Answer 4

لقد قمت بتغيير طفيف ل @سويليامز شفرة.

$$('#thetable tr:not(#headRow)').each(

يتيح لي هذا الحصول على جدول به صف رأس لا الحصول على تسليط الضوء.

<tr id="headRow">
    <th>Header 1</th>
</tr>

Answer 5

يمكنك أن تفعل شيئا لكل صف، مثل ذلك:

$('tableId').getElementsBySelector('tr').each(function (row) {
  ...
});

لذا، في نص هذه الوظيفة، يمكنك الوصول إلى كل صف، واحدًا تلو الآخر، في متغير "الصف".يمكنك بعد ذلك الاتصال بـ Event.observe(row, ...)

لذا، قد ينجح شيء مثل هذا:

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});

Answer 6

لقد وجدت حلاً مثيرًا للاهتمام لخلفية الصفوف، حيث يتم تمييز الصفوف بالماوس، بدون JS.هنا وصلة

يعمل في جميع المتصفحات.لـ IE6/7/8...

tr{ position: relative; }
td{ background-image: none } 

وبالنسبة إلى Safari، أستخدم موضع الخلفية السلبي لكل TD.