सीएसएस का उपयोग कर वैकल्पिक तालिका पंक्ति रंग?

393

मैं इसके साथ वैकल्पिक पंक्ति रंग वाली तालिका का उपयोग कर रहा हूं।सीएसएस का उपयोग कर वैकल्पिक तालिका पंक्ति रंग?

tr.d0 td { 
 
    background-color: #CC9999; 
 
    color: black; 
 
} 
 
tr.d1 td { 
 
    background-color: #9999CC; 
 
    color: black; 
 
}

<table> 
 
    <tr class="d0"> 
 
    <td>One</td> 
 
    <td>one</td> 
 
    </tr> 
 
    <tr class="d1"> 
 
    <td>Two</td> 
 
    <td>two</td> 
 
    </tr> 
 
</table>

यहाँ मैं tr के लिए वर्ग का उपयोग कर रहा है, लेकिन मैं केवल table के लिए उपयोग करना चाहते हैं। जब मैं तालिका के लिए कक्षा का उपयोग करता हूं तो tr विकल्प पर लागू होता है।

क्या मैं अपना एचटीएमएल सीएसएस का उपयोग कर लिख सकता हूं?

<table class="alternate_color"> 
    <tr><td>One</td><td>one</td></tr> 
    <tr><td>Two</td><td>two</td></tr> 
    </table>

मैं पंक्तियों को सीएसएस का उपयोग करके "ज़ेबरा पट्टियां" कैसे बना सकता हूं?

table tr:nth-child(odd) td{ 
} 
table tr:nth-child(even) td{ 
}

:nth-child() के शुरुआती दिनों अपनी browser support तरह के खराब था:

स्रोत

2010-06-21 Kali Charan Rajput

मैं एक डेमो वें वाले बच्चे के लिए सभी संभव पैटर्न() का उपयोग कर बनाया गया है - http://xengravity.com/demo/nth-child/ – xengravity

693

$(document).ready(function() 
 
{ 
 
    $("tr:odd").css({ 
 
    "background-color":"#000", 
 
    "color":"#fff"}); 
 
});

tbody td{ 
 
    padding: 30px; 
 
} 
 

 
tbody tr:nth-child(odd){ 
 
    background-color: #4C8BF5; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tbody> 
 
<tr> 
 
<td>1</td> 
 
<td>2</td> 
 
<td>3</td> 
 
<td>4</td> 
 
</tr> 
 
<tr> 
 
<td>5</td> 
 
<td>6</td> 
 
<td>7</td> 
 
<td>8</td> 
 
</tr> 
 
<tr> 
 
<td>9</td> 
 
<td>10</td> 
 
<td>11</td> 
 
<td>13</td> 
 
</tr> 
 
</tbody> 
 
</table>

वहाँ एक सीएसएस चयनकर्ता, वास्तव में एक छद्म चयनकर्ता, n वें वाले बच्चे कहा जाता है। शुद्ध सीएसएस में आप क्या कर सकते हैं निम्नलिखित:

tr:nth-child(even) { 
    background-color: #000000; 
}

नोट: आईई 8 में कोई समर्थन

या, यदि आप jQuery है:

$(document).ready(function() 
{ 
    $("tr:even").css("background-color", "#000000"); 
});

स्रोत

2010-06-21 11:43:21

पर सीएसएस लागू नहीं करता है, वैकल्पिक पंक्तियों के हाइपरलिंक रंग को भी बदलना संभव है। मैं विषम के लिए भी पंक्ति और दूसरे के लिए अलग हाइपरलिंक रंग चाहता हूं। धन्यवाद –

आईई 7/8 के लिए एक और समाधान है: http://stackoverflow.com/questions/4742450/ – Kevin

ग्रेट उत्तर! लेकिन सिर्फ जानकारी के लिए एक और सीएसएस चयनकर्ता है जिसका उपयोग किया जा सकता है यानी। 'tr: nth-of-type (odd/even) ' –

109

आप :nth-child() छद्म वर्ग की है। यही कारण है कि class="odd" सेटिंग एक आम तकनीक बन गई। 2013 के उत्तरार्ध में मुझे यह कहते हुए खुशी हो रही है कि आईई 6 और आईई 7 अंततः मर चुके हैं (या देखभाल रोकने के लिए पर्याप्त बीमार हैं) लेकिन आईई 8 अभी भी शुक्रिया है, यह the only exception है।

स्रोत

2010-06-21 11:41:40

से अधिक तीन साल बाद और समर्थन बहुत है अच्छा। –

पसंदीदा उत्तर क्योंकि यह हेडर – Mike

आप वें वाले बच्चे (विषम/भी) चयनकर्ताओं का उपयोग कर सकते हैं लेकिन नहीं सभी ब्राउज़रों (ie 6-8, ff v3.0) इन नियमों का समर्थन इसलिए कारण है कि अधिकांश समाधान जावास्क्रिप्ट/jQuery समाधान के कुछ फार्म में वापस आने के लिए इन गैर पंक्तियों को जोड़ने के लिए कक्षाएं बाघ पट्टी प्रभाव पाने के लिए अनुपालन ब्राउज़र।

स्रोत

2010-06-21 11:41:55 redsquare

<script type="text/javascript"> 
$(function(){ 
    $("table.alternate_color tr:even").addClass("d0"); 
    $("table.alternate_color tr:odd").addClass("d1"); 
}); 
</script>

स्रोत

2010-06-21 11:43:34

+45

ठीक है मुझे पता है कि jQuery इस साइट पर काफी सर्वव्यापी है लेकिन भले ही आपको स्पष्टीकरण के बिना jQuery पोस्ट नहीं करना चाहिए। यह स्क्रिप्ट अपने आप काम नहीं करेगी। – DisgruntledGoat

कर सकते हैं मैं इस तरह अपना एचटीएमएल सीएसएस उपयोग के साथ लिखता हूं?

हाँ, आप कर सकते हैं लेकिन उसके बाद आप :nth-child() छद्म चयनकर्ता (जो सीमित समर्थन हालांकि है) का उपयोग करना होगा:

table.alternate_color tr:nth-child(odd) td{ 
    /* styles here */ 
} 
table.alternate_color tr:nth-child(even) td{ 
    /* styles here */ 
}

स्रोत

2010-06-21 11:45:24 Sarfraz

एक बीजी रंग काम कर रहा है लेकिन दूसरा बीजी रंग नहीं है। –

, एक काफी आसान तरीका PHP में यह करने के लिए नहीं है, तो मैं आपकी क्वेरी को समझता हूं, मुझे लगता है कि आप PHP में कोड करते हैं और आप आउटपुट बढ़ाने के लिए सीएसएस और जावास्क्रिप्ट का उपयोग कर रहे हैं।

डेटाबेस से गतिशील आउटपुट में लूप को परिणाम के माध्यम से पुनरावृत्त करने के लिए एक लूप ले जाएगा जो तब तालिका में लोड किया जाता है।सिर्फ इस तरह के एक समारोह कॉल जोड़ें:

अब इस प्रत्येक नव पर रंगों के बीच गतिशील रूप से वैकल्पिक होगा

function getbgc($trcount) 
{ 

$blue="\"background-color: #EEFAF6;\""; 
$green="\"background-color: #D4F7EB;\""; 
$odd=$trcount%2; 
    if($odd==1){return $blue;} 
    else{return $green;}

echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.

तो पेज या पुस्तकालय फाइल करने के लिए समारोह जोड़ने जेनरेट टेबल पंक्ति।

सीएसएस के साथ गड़बड़ करने से यह बहुत आसान है जो सभी ब्राउज़रों पर काम नहीं करता है।

उम्मीद है कि इससे मदद मिलती है।

स्रोत

2013-03-13 16:06:11 mark

धन्यवाद @mark। यह ठीक नहीं है कि साइट PHP, .NET या सरल HTML में होगी। –

बस अपने एचटीएमएल कोड में निम्नलिखित जोड़ें (<head> के साथ) और आप कर रहे हैं।

HTML:

<style> 
     tr:nth-of-type(odd) { 
     background-color:#ccc; 
    } 
</style>

आसान और jQuery उदाहरण की तुलना में तेजी।

स्रोत

2014-03-21 19:33:49 bmich72

यह स्वीकार्य उत्तर होना चाहिए। जहां तक संभव हो, सीएसएस को स्टाइल को संभालना चाहिए, जबकि अन्य मामलों को संभालने के लिए जावास्क्रिप्ट का उपयोग किया जा सकता है। –

उपरोक्त में से अधिकांश कोड आईई संस्करण के साथ काम नहीं करेंगे। आईई + अन्य ब्राउज़रों के लिए काम करने वाला समाधान यह है।

<style type="text/css"> 
     tr:nth-child(2n) { 
      background-color: #FFEBCD; 
     } 
</style>

स्रोत

2014-04-23 08:06:31

हम वैकल्पिक पंक्ति रंग

के लिए अजीब और यहां तक कि सीएसएस नियमों और jQuery विधि का उपयोग कर सकते हैं सीएसएस

table tr:nth-child(odd) td{ 
      background:#ccc; 
} 
table tr:nth-child(even) td{ 
      background:#fff; 
}

jQuery

$(document).ready(function() 
{ 
    $("table tr:odd").css("background", "#ccc"); 
    $("table tr:even").css("background", "#fff"); 
});

का उपयोग का उपयोग करना 10

स्रोत

2017-01-17 07:36:46

सीएसएस का उपयोग कर वैकल्पिक तालिका पंक्ति रंग?

उत्तर

संबंधित मुद्दे