Membuat Zebra Table dengan Jquery

Intro

Beberapa waktu yang lalu kita mencoba mereview web aplication yang telah kita buat. Sampai akhirnya pada menu reporting, saya buka salah satu report lalu saya cermati, kok terlikhat ada yang kurang. dengan tampilan seperti ini tentunya user akan sulit menentukan satu kesatuan record dalam 1 baris.

Saya berfikir akan lebih baik kalau kita bisa […]

Tips Belajar Jquery Mengenal Selector JQuery Basic Filter (:odd)

Mengenal Selector JQuery Basic Filter (:odd)

match odd elements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:odd").css("background-color", "#bbbbff"); }); </script> <style> table { background:#f3f7f5; } </style> </head> <body> <table border="1"> <tr><td>Row with Index #0</td></tr> <tr><td>Row with Index #1</td></tr> <tr><td>Row with Index #2</td></tr> <tr><td>Row with Index #3</td></tr> </table> </body> […]

Mengenal Selector JQuery Basic Filter (:even)

match even elements

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:even").css("background-color", "#bbbbff"); }); </script> <style> table { background:#eeeeee; } </style> </head> <body> <table border="1"> <tr><td>Row with Index #0</td></tr> <tr><td>Row with Index #1</td></tr> <tr><td>Row with Index #2</td></tr> <tr><td>Row with Index #3</td></tr> </table> </body> </html>

Perintah

$(“tr:even”).css(“background-color”, “#bbbbff”);

tadinya saya […]

Mengenal Selector JQuery Basic Filter (:not)

Filters out all elements matching the given selector.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("input:not(:checked) + span").css("background-color", "yellow"); $("input").attr("disabled", "disabled"); }); </script> </head> <body> <div> <input type="checkbox" name="a" /> <span>Mary</span> </div> <div> <input type="checkbox" name="b" /> <span>Paul</span> </div> <div> <input type="checkbox" name="c" checked="checked" /> <span>Peter</span> </div> </body> […]

Mengenal Selector JQuery Basic Filter (:last)

matches the last selected element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:last").css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’}); }); </script> </head> <body> <table> <tr><td>First Row</td></tr> <tr><td>Middle Row</td></tr> <tr><td>Last Row</td></tr> </table> </body> </html>

Perintah

$(“tr:last”).css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’});

digunakan untuk menset css backgroundColor: ‘yellow’, fontWeight: ‘bolder’ pada tr paling akhir suatu […]

Mengenal Selector JQuery Basic Filter (:first)

:first

Match the first selected element.

Pertandingan pertama elemen yang dipilih.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("tr:first").css("font-style", "italic"); }); </script> <style> td { color:blue; font-weight:bold; } </style> </head> <body> <table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> <tr><td>Row 3</td></tr> </table> </body> </html>

Perintah

$(“tr:first”).css(“font-style”, “italic”);

digunakan untuk menset font-style=italic […]

Mengenal Selector JQuery Hierachi (prev ~ sibling)

Prev ~ Sibling

Matches all sibling elements after the “prev” element that match the filtering “siblings” selector.

Cocokkan semua elemen saudara kandung setelah “prev” elemen yang cocok dengan penyaringan “saudara kandung” pemilih.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("#prev ~ div").css("border", "3px groove blue"); }); </script> <style> […]

Mengenal Selector JQuery Hierachi (prev + next)

Perintah

$(“label + input”).css(“color”, “blue”).val(“Labeled!”)

digunakan untuk menset value seluruh element input yang dituliskan berada disamping element label yang ada di document HTML, valuenya diset = Labeled!

Prev + next

Matches all next elements specified by “next” that are next to elements specified by “prev”. Terjemahan googlenya Cocokkan semua elemen berikutnya ditentukan oleh “di samping” […]

Mengenal Selector JQuery Hierachi (Parent > child)

Matches all child elements specified by “child” of elements specified by “parent”. Terjemahan google Cocokkan semua elemen anak ditentukan oleh “anak” dari unsur ditentukan oleh “orang tua”. Bingung yah, nggak usah bingung, kita langsung praktek saja

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("#main > *").css("border", "3px double […]

Mengenal Selector JQuery Hierachi (ancestor descendant)

ancestor descendant

Matches all descendant elements specified by “descendant” of elements specified by “ancestor”, coba terjemahkan pakai google translate artinya Cocokkan semua unsur keturunan ditentukan oleh “keturunan” dari unsur ditentukan oleh “nenek moyang” wah bingung yah.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="../jquery-latest.js"></script> <script> $(document).ready(function(){ $("form input").css("border", "2px dotted blue"); […]