តើធ្វើដូចម្តេចអំពីការទទួលឥទ្ធិពលសេះបង្កង់មួយ, ជំនួសណ៍បន្ទាត់នៃតារាង HTML របស់អ្នក? ជា CSS jQuery ដែលអ្នកអាចឬ!
CSS ou jQuery?
Fica a seu critério escolher CSS (preferencialmente) ou JQuery. No exemplo a seguir, optei por criar uma classe .mytab para que o efeito não incida em toda e qualquer tabela, mas somente sobre aquelas que forem designadas. ក្នុងករណីនេះ, você deve especificar sua tabela com class=”mytab”. Caso queira afetar todas as tabelas, troque .mytab pela tag តារាង. ធ្វើនេះ, basta inserir um desses códigos entre as tags HEAD do seu HTML e pronto.
Código usando CSS
1 2 3 4 5 6 7 8 | <style type="text/css"> .mytab tr:nth- កូន(សេស) { ពណ៌ផ្ទៃខាងក្រោយ:#fff; } .mytab tr:nth- កូន(សូម្បីតែ) { ពណ៌ផ្ទៃខាងក្រោយ:#ស៊ីស៊ី; } </រចនាប័ទ្ម> |
Código usando jQuery
1 2 3 4 5 6 7 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></ស្គ្រីប> <script type="text/javascript"> $(ឯកសារ).ត្រៀមខ្លួនជាស្រេច(មុខងារ() { $('.mytab tr:odd').css('background-color', '#ccc'); $('.mytab tr:even').css('background-color', '#fff'); }); </ស្គ្រីប> |
ឧទាហរណ៍
Código completo, em CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <html> <ប្រធាន> <ចំណងជើង>Zebra</ចំណងជើង> <style type="text/css"> .mytab tr:nth- កូន(សេស) { ពណ៌ផ្ទៃខាងក្រោយ:#fff; } .mytab tr:nth- កូន(សូម្បីតែ) { ពណ៌ផ្ទៃខាងក្រោយ:#ស៊ីស៊ី; } </រចនាប័ទ្ម> </ប្រធាន> <រាងកាយ> <table class="mytab"> <ដាដ> <tr> <ទី>Ordem</ទី> <ទី>ឈ្មោះ</ទី> <ទី>អាយុ</ទី> <ទី>ទូរស័ព្ទ</ទី> </tr> </ដាដ> <tbody> <tr> <td>1</td> <td>Maria</td> <td>45</td> <td>3434-6767</td> </tr> <tr> <td>2</td> <td>ចន</td> <td>12</td> <td>4545-9009</td> </tr> <tr> <td>3</td> <td>ម៉ាកូស</td> <td>33</td> <td>9987-7655</td> </tr> <tr> <td>4</td> <td>Claudia</td> <td>21</td> <td>3409-5652</td> </tr> <tr> <td>5</td> <td>Juca</td> <td>7</td> <td>8981-7822</td> </tr> </tbody> </តារាង> </រាងកាយ> </html> |
ការចូលដំណើរការសរុប: 19495
វិធី, legal esse código css, tenho usado classes para zebrar minhas tabelas.
ល្អណាស់.
វាធ្វើការយ៉ាងល្អឥតខ្ចោះ …. សាមញ្ញនិងមិនស្មុគស្មាញ … សូមអរគុណអ្នក