jQuery केवल तालिका में चयनित कॉलम को हाइलाइट करते हुए

Question

मुझे यह पोस्ट highlighting even columns पर दिखाई देता है लेकिन क्या मैं केवल चयनित कॉलम को हाइलाइट कर सकता हूं?

$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue"); 

लेकिन मैं चाहते हैं: नोट:

यहाँ कोड वे का उपयोग है class="highlight" चयनित स्तंभों पर होगा, इसलिए यदि मैं कॉलम 3 चयनित class="highlight" स्तंभ 2 से हटा दिया और जोड़ा जाएगा कॉलम 3 पर। jQuery को चयनित कॉलम के आधार पर कक्षा जोड़ने की आवश्यकता है।

<table class="tbl"> 
    <tr> 
     <th class="firstColumn"> 
      Cell 1:Heading 
     </th> 
     <th class="highlight"> 
      Selected column so this should be highlighted 
     </th> 
     <th> 
      Cell 3:Heading 
     </th> 
     <th> 
      Cell 4:Heading 
     </th> 
     <th> 
      Cell 5:Heading 
     </th> 
    </tr> 
    <tr> 
     <td> 
      Cell 1:Row 1 
     </td> 
     <td class="highlight"> 
      Selected column so this should be highlighted 
     </td> 
     <td> 
      Cell 3:Row 1 
     </td> 
     <td> 
      Cell 4:Row 1 
     </td> 
     <td> 
      Cell 5:Row 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Cell 1:Row 2 
     </td> 
     <td class="highlight"> 
      Selected column so this should be highlighted 
     </td> 
     <td> 
      Cell 3:Row 2 
     </td> 
     <td> 
      Cell 4:Row 2 
     </td> 
     <td> 
      Cell 5:Row 2 
     </td> 
    </tr> 
</table> 

Answer 1

आप jQuery tableHover plugin पर एक नज़र लेने के लिए इस लक्ष्य को हासिल कर सकते हैं।

कुछ इस तरह: तो फिर इस

$('table.tbl').tableHover({ 
    colClass: 'hover', 
    clickClass: 'click', 
    headCols: true, 
    footCols: true 
}); 

संपादित की तरह कुछ का उपयोग करें?

Working Demo- स्तंभ डेमो से

कोड हाइलाइट करने के लिए किसी भी सेल पर क्लिक करें, -

$(function() { 
    var rows = $('table.tbl tr'); 

    rows.children().click(function() { 

    rows.children().removeClass('highlight'); 
    var index = $(this).prevAll().length; 
    rows.find(':nth-child(' + (index + 1) + ')').addClass('highlight'); 

    }); 
}); 

Answer 2

आप अपनी तालिका हेडर में एक लिंक बनाने हैं, तो आप कुछ इस तरह कर सकते हैं :

$("table.tbl th a").click(function() { 
    var colnum = $(this).closest("th").prevAll("th").length; 

    $(this).closest("table").find("tr td").removeClass("highlight"); 
    $(this).closest("table").find("tr td:eq(" + colnum + ")").addClass("highlight"); 
} 

जो क्लिक किए गए लिंक के नीचे सभी कक्ष सेट करेगा वर्ग "हाइलाइट" के लिए।

बेशक, आप अभी भी सही शैली अपने सीएसएस फ़ाइल में स्थापित करना चाहिए:

table.tbl tr .highlight { background-color: blue; } 

Answer 3

आप के बजाय colgroups का उपयोग कर हर कोशिका को कक्षाओं जोड़ने पर विचार किया है?

मैं हाल ही में अपने आप को colgroups की शक्ति को देखने के लिए शुरू कर दिया है, और वे इस तरह काम करते हैं:

.highlight { 
 
    background-color: yellow; 
 
}

 <table id="myTable"> 
 
    \t  
 
    \t  <colgroup class="highlight"></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  <colgroup></colgroup> 
 
    \t  
 
    \t  <thead> 
 
    \t  <tr> 
 
    \t   <th>header1</th> 
 
    \t   <th>header2</th> 
 
    \t   <th>header3</th> 
 
    \t   <th>header4</th> 
 
    \t   <th>header5</th> 
 
    \t  </tr> 
 
    \t  </thead> 
 
    \t  <tbody> 
 
    \t  <tr> 
 
    \t   <td>cell a</td> 
 
    \t   <td>cell b</td> 
 
    \t   <td>cell c</td> 
 
    \t   <td>cell d</td> 
 
    \t   <td>cell e</td> 
 
    \t  </tr> 
 
     \t <tbody> 
 
    <table>

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

वहाँ एक पूरा videoguide आप यहीं मिल सकती है: table fix header, and row + column highlighting.

* जवाब संपादित क्योंकि यह अप्रासंगिक था, मैं सवाल गलत पढ़ा है, और एक पूरी तरह से अलग बात को जवाब दे दिया। (अब एक सही उत्तर जोड़ा)

Answer 4

यहाँ मैं एक क्रॉस-बाल मेरे मेज पर प्रभावित करते हैं जोड़ने के लिए उपयोग करें:

$('tbody td').hover(function() { 
    $(this).closest('tr').find('td,th').addClass('highlight'); 
    var col = $(this).index()+1; 
    $(this).closest('table').find('tr :nth-child('+col+')').addClass('highlight'); 
}, function() { 
    $(this).closest('tr').find('td,th').removeClass('highlight'); 
    var col = $(this).index()+1; 
    $(this).closest('table').find('tr :nth-child('+col+')').removeClass('highlight'); 
}); 

थोड़ा बड़ा टेबल पर धीमी गति से चलाने के लिए हालांकि (हाइलाइटिंग पीछे है) लगता है।

Answer 5

यदि आप colspan और rowspan का समर्थन करना चाहते हैं, तो पहले आपको टेबल सेल इंडेक्स बनाना होगा, यानी। मैट्रिक्स जो मार्कअप के बावजूद प्रत्येक पंक्ति में सेल पॉजिटिशन की पहचान करता है। फिर आपको ब्याज की सभी तालिका कोशिकाओं की घटनाओं को ट्रैक करने और मैट्रिक्स में उनके ऑफ़सेट की गणना करने और लंबवत अनुक्रमणिका साझा करने वाले कॉलम की गणना करने की आवश्यकता है।

जिसके परिणामस्वरूप देखने निम्नलिखित एनीमेशन में सचित्र है:

मुझे लगता है कि स्तंभों के लिए एक wholly.mouseenter और wholly.mouseleave घटनाओं से चलाता है एक प्लगइन लिखा है। Wholly।

Answer 6

आप पूरी तरह से बुलाए गए प्लगइन का उपयोग कर सकते हैं। आप इसे http://voidtricks.com/wholly-jquery-plugin/