प्रोटोटाइप का उपयोग करके मैं तालिका पंक्ति को कैसे हाइलाइट कर सकता हूं?

Question

मैं प्रोटोटाइप लाइब्रेरी का उपयोग कैसे कर सकता हूं और प्रत्येक पंक्ति पंक्ति टैग में जावास्क्रिप्ट डालने के बजाय, प्रत्येक पंक्ति में ऑनसाउसओवर और ऑनसाउसआउट ईवेंट इंजेक्ट करने के लिए अविभाज्य जावास्क्रिप्ट कैसे बना सकता हूं?

प्रोटोटाइप लाइब्रेरी (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 विधियों का उपयोग कर सकते हैं।

एक सीएसएस वर्ग "हाइलाइट" बनाएं जो आप <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

आप, प्रत्येक पंक्ति के लिए कुछ कर सकते हैं तो जैसे:

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

तो, कि समारोह के मुख्य भाग में, आप प्रत्येक के लिए उपयोग किया पंक्ति, एक समय में, 'पंक्ति' चर में। इसके बाद आप Event.observe (पंक्ति, ...) कॉल कर सकते हैं

तो, कुछ इस तरह काम कर सकते हैं:

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

Answer 4

मैं @swilliams कोड के लिए एक मामूली परिवर्तन किया है।

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

यह मैं एक शीर्ष लेख पंक्ति है कि नहीं पर प्रकाश डाला हो जाता है के साथ एक मेज देता है।

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

Answer 5

थोड़ा सा सामान्य समाधान:

मान लीजिए कि मैं पंक्तियों वाली तालिकाओं कि जब मैं उन पर माउस सूचक डाल पर प्रकाश डाला जाएगा बनाने के लिए एक आसान तरीका है करने के लिए चाहते हैं। आदर्श दुनिया में यह सिर्फ एक सरल सीएसएस नियम के साथ, बहुत आसान होगा:

tr:hover { background: red; } 

दुर्भाग्य से, IE के पुराने संस्करणों का समर्थन नहीं करते: ए के अलावा अन्य तत्वों पर मंडराना चयनकर्ता तो हम जावास्क्रिप्ट का उपयोग करने के लिए है।

उस स्थिति में, मैं तालिका तालिका को चिह्नित करने के लिए "हाइलाइट करने योग्य" तालिका तालिका को परिभाषित करता हूं जिसमें होवर योग्य पंक्तियां होनी चाहिए। मैं तालिका पंक्ति पर वर्ग "हाइलाइट" जोड़कर और हटाकर पृष्ठभूमि स्विचिंग कर दूंगा।

सीएसएस

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 6

मुझे पंक्तियों की पृष्ठभूमि के लिए एक दिलचस्प समाधान मिला, जेएस के बिना माउस पर उजागर पंक्तियां।यहां link

सभी ब्राउज़रों में काम करता है। आईई 6/7/8 के लिए ...

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

और सफारी के लिए मैं प्रत्येक टीडी के लिए नकारात्मक पृष्ठभूमि स्थिति का उपयोग करता हूं।