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

वोट
10

मैं प्रोटोटाइप पुस्तकालय का उपयोग कैसे और नहीं बल्कि प्रत्येक तालिका पंक्ति टैग में जावास्क्रिप्ट डालने से, प्रत्येक पंक्ति के onmouseover और घटनाओं onmouseout सुई विनीत जावास्क्रिप्ट बना सकते हैं?

एक जवाब प्रोटोटाइप पुस्तकालय (mootools, jQuery, आदि के बजाय) का उपयोग सबसे उपयोगी होगा।

09/09/2008 को 14:58
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


6 जवाब

वोट
7

आप प्रोटोटाइप का उपयोग कर सकते हैं 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'); }  
}
09/09/2008 को 15:07
का स्रोत उपयोगकर्ता

वोट
9

<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>
09/09/2008 को 15:07
का स्रोत उपयोगकर्ता

वोट
1

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

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

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

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

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});
09/09/2008 को 15:11
का स्रोत उपयोगकर्ता

वोट
2

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

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

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

<tr id="headRow">
    <th>Header 1</th>
</tr>
09/09/2008 को 15:19
का स्रोत उपयोगकर्ता

वोट
3

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

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

tr:hover { background: red; }

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

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

सीएसएस

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>
27/09/2008 को 03:45
का स्रोत उपयोगकर्ता

वोट
0

मैं पंक्तियाँ पृष्ठभूमि के लिए अब दिलचस्प समाधान नहीं मिला, जे एस के बिना पंक्तियों पर माउस पर प्रकाश डाला। यहाँ है लिंक

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

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

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

03/03/2010 को 11:13
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more