Saya memiliki masalah serupa, pada dasarnya saya memiliki 2 tabel dengan 2 kolom (kunci & nilai) tetapi kuncinya tidak berurutan, karena terkadang 2 tabel memiliki lebih banyak atau lebih sedikit kunci sehingga pencocokan urutan akan berubah
Sekarang masalahnya adalah saya suka membandingkan 2 nilai tabel dengan kunci, jika Tabel ke-2 memiliki kunci yang cocok dengan nilai yang berbeda maka saya perlu menyorot latar belakang
kode sampel saya
{{(fungsi(){
jika (Objek. hasOwn(api1. data. objek1, baris saat ini. Brandkey)){
konstanta val1 = api1. data. objek1[Baris saat ini. Brandkey];
Baris saat ini. Nilai == val1 ? . 'merah';
}
})()}}
tolong bantu aku
Banyak situs yang menyajikan data tabular menggunakan warna latar bergantian untuk meningkatkan keterbacaan data tersebut. Dan ketika saya mengembangkan sebuah situs, saya menyadari bahwa saya juga ingin melakukannya. Masalah?
Solusi yang jelas adalah meng-hardcode setiap baris kedua untuk memastikannya memiliki warna latar belakang yang berbeda. Tapi saya ingin tabelnya dinamis, sehingga memungkinkan untuk menambahkan baris baru di tengah tabel tanpa mengubah atribut warna latar belakang dari baris berikutnya.
Solusi saya menggunakan JavaScript, karena CSS3 belum benar-benar merupakan opsi yang layak. Browser saat ini masih berjuang untuk mendukung CSS1 dan CSS2. Meskipun tabel HTML tidak direkomendasikan untuk tata letak halaman Web, tabel tersebut masih sangat cocok untuk penyajian data tabular. Dalam tutorial ini, saya akan menyajikan tiga contoh berdasarkan ide yang sama. Saya telah menguji solusi di IE6, Firefox 1. 0, Mozilla 1. 7. 3 dan Opera7. 54 hanya pada platform Windows
MulaiMari kita mulai dengan tabel html biasa. Apakah tabel berisi elemen kepala/kaki tidak menjadi masalah dalam kasus ini
<table id="theTable"><tr><td>0 - some txt</td></tr>
<tr><td>1 - some txt</td></tr>
<tr><td>2 - some txt</td></tr>
<tr><td>3 - some txt</td></tr>
<tr><td>4 - some txt</td></tr>
</table>
Sekarang, kita perlu memeriksa apakah browser cukup baru dan memiliki kemampuan JavaScript yang diperlukan (mis. e. Dukungan DOM W3C). Baris berikut melakukan pemeriksaan ini, mendiskualifikasi Netscape 4 dan lainnya dari generasi tersebut. Peramban semacam itu tidak akan berusaha mewarnai tabel
Perhatikan juga bahwa yang umum untuk semua contoh ini adalah kode ini
var table = document.getElementById(id);var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
...Contoh 1
Contoh pertama ini menggunakan elemen gaya di mana kita telah mendefinisikan dua kelas untuk warna latar belakang
<style>.odd{background-color: white;}
.even{background-color: gray;}
</style>
Gayanya fleksibel. itu juga bisa mendefinisikan sesuatu yang lain, seperti bahwa setiap baris kedua harus ditampilkan dalam huruf miring. Fungsi lengkapnya terlihat seperti ini
function alternate(id){if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}_
Di sini, if(document.getElementById)_2, operator modulo, memberi kita sisa pembagian
Fungsi di atas harus dipanggil dari event onload dari tag body
<html>..
<body onload="alternate('thetable')">
<table id="thetable">
<tr><td>...</td></tr>
</table>
..._
Hasilnya bisa terlihat seperti ini
Mari beralih ke contoh berikutnya — sesuatu yang sedikit lebih menantang. Alih-alih hanya menggunakan dua warna bergantian, saya ingin menggunakan beberapa. Mari tambahkan larik yang menampung semua warna ini
Karena sejumlah warna memiliki nama yang ditentukan dalam HTML, kami akan beralih ke nilai heksadesimal. Warna yang dihasilkan akan terdiri dari tiga nilai. merah, hijau, dan biru. Putih dicapai ketika ketiga warna dihidupkan secara maksimal. if(document.getElementById)_3. Kebalikannya, hitam, adalah if(document.getElementById)4
//various gray shadesvar colors = new Array('#ffffff','#dddddd','#aaaaaa','#888888');_
Kode manipulasi baris hanya akan terdiri dari satu baris, tetapi alih-alih menyalin dan menempelkan kode yang sama, kami akan membuat panggilan fungsi terpisah
for(..//manipulate rows
doMultiple(rows[i], i);
..
function doMultiple(row, i){
row.style.backgroundColor = colors[i % colors.length];
}
function doAlternate(row, i){
if(i % 2 == 0){
row.className = "even";
}else{
row.className = "odd";
}
}
Di sini, saya juga menambahkan fungsi untuk Contoh 1 bernama if(document.getElementById)5. Ini membuatnya lebih mudah untuk beralih di antara berbagai metode yang dengannya kita dapat mengganti warna baris tabel
Seperti yang terlihat pada fragmen di atas, dimungkinkan untuk menetapkan nama kelas CSS untuk baris, atau atribut tertentu dari tag HTML
rows[i].classNamerows[i].style.backgroundColor
Hasil Contoh 2 mungkin muncul seperti yang ditunjukkan di bawah ini
Contoh terakhir menunjukkan varian yang sangat berwarna di mana warna dihitung tergantung pada jumlah baris dalam tabel, warna awal dan faktor yang diberikan
Pertama, kita perlu mengatur beberapa variabel
var color = 255; //starting color (in decimal)var steps = 20; //the factor, a "distance" between colors
var down = true; //direction, if going up or down when calculating //color value
Kami sekarang menambahkan fungsi baru, if(document.getElementById)6
if(document.getElementById)_0Karena warna sedang dihitung, kami perlu memastikan bahwa kami tidak keluar dari jangkauan, nilai yang valid adalah dari 0 hingga 255. Argumen warna tidak dipisahkan menjadi nilai RGB, jadi kita perlu mengisi jika kita berada di bawah 16, jika tidak, nilainya akan ilegal. Jika kita memiliki tabel yang sangat panjang atau nilai if(document.getElementById)7 yang besar, gradien akan berubah ke arah lain. Dalam fungsi ini, bagian if(document.getElementById)_8 diperbaiki dan dua lainnya diubah
Metode if(document.getElementById)9 cukup berguna saat Anda perlu mengonversi angka — desimal ke heksadesimal, dalam hal ini. Argumen dalam if(document.getElementById)9 adalah radix, yaitu. 2 untuk biner, 10 untuk desimal, dan 16 untuk hex. Gambar di bawah menunjukkan bagaimana tabel muncul di Hasil di Firefox 1. 0, IE6, Mozilla 1. 7 dan Opera7. 5
Berhati-hatilah untuk tidak membuat tampilan terlalu berwarna — kami tetap ingin memastikan keterbacaan data tabel kami. Dengan beberapa kombinasi warna, bahkan mungkin perlu mengubah warna teks tabel menggunakan sesuatu seperti ini
if(document.getElementById)_1KesimpulanMenggunakan CSS dan JavaScript, cukup mudah untuk menambah atau meningkatkan keterbacaan kode kita tanpa harus membuat ulang halaman HTML dari aplikasi server. Seperti yang telah kita lihat di sini, itu juga dapat ditambahkan pada halaman HTML statis. Untuk melihat contoh ini beraksi, unduh file HTML yang berisi kode
Bagikan Artikel Ini
Kennet Svanberg
Kennet adalah programmer dan spesialis XML. Selama dua tahun terakhir, dia telah mengerjakan berbagai proyek terkait solusi sumber tunggal untuk informasi yang diberi tag XML. Beliau meraih gelar Bachelor of Science dari Royal Institute of Technology di Swedia