Mengubah javascript tabel sel warna

Question

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';
}
})()}}

Table of Contents Show

Bagikan Artikel Ini
Bagaimana cara mengubah warna latar belakang sel tabel dalam JavaScript?
Bagaimana cara mengubah warna sel dalam tabel?
Bagaimana cara mengubah warna sel dalam tabel di HTML?
Bisakah Anda mengubah warna dalam JavaScript?

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

Mulai

Mari 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

if(document.getElementById)

_

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

Contoh 2

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 shades  

var 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].className  

rows[i].style.backgroundColor

Hasil Contoh 2 mungkin muncul seperti yang ditunjukkan di bawah ini

Contoh 3

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)

_0

Karena 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)

_1

Kesimpulan

Menggunakan 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

Bagaimana cara mengubah warna latar belakang sel tabel dalam JavaScript?

bgWarna = '#00FF00';

Bagaimana cara mengubah warna sel dalam tabel?

Pilih sel tempat Anda ingin menerapkan efek isian sebagai warna isian. Pada tab Tabel, di bawah Gaya Tabel, klik panah di samping Isian. Pada menu Fill, klik Fill Effects. Klik tab Padat, lalu klik warna yang Anda inginkan .

Bagaimana cara mengubah warna sel dalam tabel di HTML?

Warna latar sel diatur dengan menerapkan atribut bgcolor ke tag .

Bisakah Anda mengubah warna dalam JavaScript?

Untuk mengubah warna teks, Anda dapat menggunakan metode “getElementById()” dengan “style. warna” properti . Dalam skenario seperti itu, elemen teks dapat diakses menggunakan metode getElementById() dan kemudian menerapkan atribut warna dengan bantuan gaya HTML. properti warna.

kode javascript