2009-04-17 5 views
5

मुझे माउस पर एक टेबल पंक्ति को हाइलाइट करने की आवश्यकता है। ऐसा करने के लिए एक आसान पर्याप्त चीज़ की तरह लगता है, है ना? विशेष रूप से jQuery का उपयोग कर। लेकिन हां, मैं बहुत भाग्यशाली नहीं हूँ।jQuery हाइलाइट टेबल पंक्ति

मैं एक तालिका पंक्ति पर प्रकाश डाला के लिए अलग अलग समाधान परीक्षण किया है, लेकिन कुछ भी

:-(

मैं निम्नलिखित स्क्रिप्ट का परीक्षण किया है काम करने के लिए लग रहे हैं:

// TEST one  
jQuery(document).ready(function() { 

    jQuery("#storeListTable tr").mouseover(function() { 
    $(this).parents('#storeListTable tr').toggleClass("highlight"); 
    alert('test'); // Just to test the mouseover event works 
    }); 

}); 

//TEST 2 
jQuery(document).ready(function() { 

    $("#storeListTable tbody tr").hover( 
    function() { // mouseover 
      $(this).addClass('highlight'); 
    }, 
    function() { // mouseout 
      $(this).removeClass('highlight'); 
    } 
    ); 
}); 

यह मेरा एचटीएमएल कोड

है
<html> 
    <head> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
media="screen" charset="utf-8" /> 
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></ 
script> 
    </head> 
    <body> 

<table id="storeListTable"> 
    <thead> 
     <tr class="even"> 
     <th>ID</th> 
     <th>Navn</th> 
     <th>E-post</th> 
     <th>Nettside</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="" id="store1"> 
     <td>10</td> 
     <td>Boss Store Oslo</td> 
     <td> <a href="mailto:">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store3"> 
     <td>8</td> 
     <td>Brandstad Oslo City</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store4"> 
     <td>7</td> 
     <td>Fashion Partner AS</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store5"> 
     <td>1</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store6"> 
     <td>2</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
    </tbody> 
    </table> 
    </body> 
</html> 

तो .... किसी को भी मुझे सही दिशा में एक धक्का दे सकता है?


अद्यतन

मैं jQuery का उपयोग नहीं किसी भी अधिक तालिका पंक्तियों को उजागर करना है, लेकिन सीएसएस।

इस सूची में तत्वों के लिए है, लेकिन मैं इस तालिका पंक्तियों के साथ-साथ के लिए काम करेंगे अनुमान लगा रहा हूँ:

ली: n वें वाले बच्चे (विषम) {पृष्ठभूमि का रंग: # f3f3f3; }

उत्तर

9

इस प्लगइन http://p.sohei.org/jquery-plugins/columnhover/

प्रयास करें यहाँ कैसे आप इसका इस्तेमाल है।

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#storeListTable').columnHover({ hoverClass:'highlight'}); 
    }); 
</script> 

आप IE6 समर्थन की जरूरत नहीं है, तो ध्यान

+0

धन्यवाद दोस्त। वह प्लगइन है जिसका उपयोग मैंने समाप्त किया। – Steven

+0

काम करता है लेकिन पुराना है। जूलियन से विधि पृष्ठभूमि रंग विधि का उपयोग करें। नोट - यानी अब लगभग 1.5% (और सिकुड़ रहा है) - और मोबाइल लगभग 7% (और बढ़ रहा है - तो आगे बढ़ने पर ध्यान केंद्रित करने वाला कौन सा आसान है :) –

5

क्या आप परीक्षण करते समय वास्तव में चेतावनी संदेश पॉप अप करते हैं?

यदि ऐसा है, तो यह संभव है कि समस्या आपके सीएसएस के साथ हो। मुझे यह महसूस करने में काफी समय लगा कि एक टीआर टैग पर लागू अधिकांश शैलियों का कोई प्रभाव नहीं पड़ता है। तो, सामान्य रूप में, आप के बजाय

.highlight {highlighted appearance} 
1

+1 wheresrhys पंक्ति

.highlight td {highlighted appearance} 

में प्रत्येक टीडी के लिए शैलियाँ लागू करने की जरूरत है। .highlight td पर पृष्ठभूमि नियम का उपयोग करके मेरे लिए 'टेस्ट 2' काम ठीक हो गया।

'टेस्ट 1' अनावश्यक parents() कॉल की वजह से नहीं होगा।

33

ले लो, हाइलाइटिंग कुछ सरल सीएसएस के साथ किया जा सकता है: - पूरी तरह से काम करता है -

#table tr:hover { 
    background-color: #ff8080; 
} 
+0

यह डिफ़ॉल्ट दृष्टिकोण है जिसका मैं अब उपयोग कर रहा हूं (जून 2012) । जियो और सीखो :) – Steven

1

एक बार, मैं इस समाधान पाया बस जोड़ें! दुर्भाग्य से, मैं लेखक :(

<script type="text/javascript"> 

    $("#table_id").not(':first').hover(
     function() { 
      $(this).css("background","red"); 
     }, 
     function() { 
      $(this).css("background",""); 
     } 
    ); 

    </script> 
0

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

$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');}); 
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');}); 

की तरह कर सकता है आप पंक्ति प्रति अधिक divs है, तो आप div निर्दिष्ट कर सकते हैं प्रत्येक पंक्ति वर्ग = "पंक्ति" दे रही है और डालने से उजागर किया जा करने के लिए (div.row 'पर दूसरे तर्क के रूप में()।