Alter Jadual Latar Belakang Warna Menggunakan JavaScript

Takeaways Key

JavaScript boleh digunakan untuk mengubah warna latar belakang baris jadual secara dinamik, meningkatkan kebolehbacaan tanpa memerlukan kod hardcode setiap baris kedua atau menjana semula halaman HTML dari aplikasi pelayan.
Satu kaedah melibatkan menentukan dua kelas untuk warna latar belakang dalam elemen gaya, kemudian menggunakan JavaScript untuk menetapkan kelas -kelas ini kepada ganjil dan juga baris.
Kaedah yang lebih kompleks membolehkan pelbagai warna berganti dengan menggunakan array yang memegang semua warna ini dan menyerahkannya kepada baris berdasarkan indeks mereka.
Kaedah akhir mengira warna bergantung kepada bilangan baris dalam jadual, warna permulaan dan faktor yang diberikan, mewujudkan kesan kecerunan. Kaedah ini memerlukan pertimbangan yang teliti terhadap kombinasi warna untuk mengekalkan kebolehbacaan.

Banyak laman web yang mempersembahkan data tabular menggunakan warna latar belakang yang berselang -seli untuk meningkatkan kebolehbacaan data tersebut. Dan ketika saya membangunkan tapak, saya menyedari bahawa saya juga mahu melakukannya. Masalahnya? Dalam kes saya jadual tidak dihasilkan oleh aplikasi sampingan pelayan atau skrip yang anda dapat mencari banyak contoh di web.

Penyelesaian yang jelas adalah untuk Hardcode setiap baris kedua untuk memastikan ia mempunyai warna latar belakang yang berbeza. Tetapi saya mahu meja itu dinamik, sehingga mungkin untuk menambah baris baru di tengah -tengah meja tanpa mengubah atribut warna latar belakang baris yang diikuti.

Penyelesaian saya menggunakan JavaScript, kerana CSS3 tidak benar -benar pilihan yang sesuai. Pelayar hari ini masih berjuang untuk menyokong CSS1 dan CSS2. Walaupun jadual HTML tidak disyorkan untuk susun atur laman web, mereka masih sesuai dengan pembentangan data tabular. Dalam tutorial ini, saya akan membentangkan tiga contoh berdasarkan idea yang sama. Saya telah menguji penyelesaian dalam IE6, Firefox 1.0, Mozilla 1.7.3 dan Opera 7.54 pada platform Windows sahaja.

Bermula

mari kita mulakan dengan jadual HTML biasa. Sama ada jadual mengandungi elemen kepala/kaki tidak penting dalam kes ini:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Sekarang, kita perlu menyemak bahawa penyemak imbas itu agak baru dan mempunyai keupayaan JavaScript yang diperlukan (iaitu sokongan W3C DOM). Baris berikut melakukan pemeriksaan ini, membatalkan kelayakan Netscape 4 dan lain -lain generasi itu. Pelayar sedemikian tidak akan cuba mewarnai meja.

if(document.getElementById)

Juga ambil perhatian bahawa biasa kepada semua contoh ini ialah kod ini:

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i < rows.length; i++){           <br>
    //manipulate rows <br>
      ...

Contoh 1

Contoh pertama ini menggunakan elemen gaya di mana kita telah menentukan dua kelas untuk warna latar:

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

Gaya ini fleksibel: ia juga boleh menentukan sesuatu yang lain, seperti yang setiap baris kedua harus dipaparkan dalam huruf miring. Fungsi lengkap kelihatan seperti ini:

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i < rows.length; i++){           <br>
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

di sini, %, pengendali modulo, memberi kita selebihnya di bahagian.

Fungsi di atas hendaklah dipanggil dari peristiwa onload Tag Body:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Hasilnya boleh kelihatan seperti ini:

Contoh 2

mari kita beralih ke contoh seterusnya - sesuatu yang lebih mencabar. Daripada menggunakan hanya dua warna berganti, saya mahu menggunakan beberapa. Mari tambahkan array yang memegang semua warna ini.

Oleh kerana bilangan warna yang terhad mempunyai nama yang ditetapkan dalam HTML, kami akan beralih kepada nilai heksadesimal. Warna -warna yang dihasilkan akan terdiri daripada tiga nilai: merah, hijau, dan biru. Putih dicapai apabila ketiga -tiga warna dihidupkan pada Max: #FFFFFF. Sebaliknya, hitam, adalah #000000.

if(document.getElementById)

Kod penanaman baris akan terdiri hanya satu baris, tetapi bukannya menyalin dan menampal kod yang sama, kami akan membuat panggilan fungsi yang berasingan:

var table = document.getElementById(id);   <br>
var rows = table.getElementsByTagName("tr");   <br>
for(i = 0; i < rows.length; i++){           <br>
    //manipulate rows <br>
      ...

di sini, saya juga menambah fungsi misalnya 1 yang dipanggil doalternate. Ini menjadikannya lebih mudah untuk menukar antara kaedah yang berbeza yang mana kita boleh menggantikan warna baris meja.

Seperti yang dilihat dalam serpihan di atas, ada kemungkinan untuk menetapkan baris nama kelas CSS, atau atribut khusus dari tag HTML:

<style> <br>
  .odd{background-color: white;} <br>
  .even{background-color: gray;} <br>
</style>

Hasil Contoh 2 mungkin muncul seperti yang ditunjukkan di bawah:

Contoh 3

Contoh akhir menunjukkan varian yang benar -benar berwarna -warni di mana warna dikira bergantung kepada bilangan baris dalam jadual, warna permulaan dan faktor yang diberikan.

Pertama, kita perlu menetapkan beberapa pembolehubah:

function alternate(id){ <br>
  if(document.getElementsByTagName){  <br>
    var table = document.getElementById(id);   <br>
    var rows = table.getElementsByTagName("tr");   <br>
    for(i = 0; i < rows.length; i++){           <br>
  //manipulate rows <br>
      if(i % 2 == 0){ <br>
        rows[i].className = "even"; <br>
      }else{ <br>
        rows[i].className = "odd"; <br>
      }       <br>
    } <br>
  } <br>
}

Kami kini menambah fungsi baru, Dogradient.

<html> <br>
... <br>
<body onload="alternate('thetable')"> <br>
<table > <br>
<tr><td>...</td></tr> <br>
</table> <br>
...

Oleh kerana warna -warna dikira, kita perlu memastikan bahawa kita tidak keluar dari jarak, nilai yang sah adalah dari 0 hingga 255. Argumen warna tidak dipisahkan menjadi nilai RGB, jadi kita perlu pad jika kita pergi di bawah 16, jika tidak, nilai itu akan menjadi haram. Jika kita mempunyai jadual yang sangat panjang atau nilai langkah besar, kecerunan akan beralih ke arah yang lain. Dalam fungsi ini, bahagian biru ditetapkan dan dua yang lain diubahsuai.

Kaedah ToString agak berguna apabila anda perlu menukar nombor - perpuluhan ke hex, dalam kes ini. Hujah dalam ToString adalah radix, iaitu. 2 untuk binari, 10 untuk perpuluhan, dan 16 untuk hex. Imej di bawah menunjukkan bagaimana jadual muncul dalam keputusan dalam Firefox 1.0, IE6, Mozilla 1.7 dan Opera 7.5.

berhati -hati untuk tidak membuat paparan terlalu berwarna -warni - kami masih mahu memastikan kebolehbacaan data jadual kami. Dengan beberapa kombinasi warna, mungkin juga perlu menukar warna teks meja menggunakan sesuatu seperti ini:

<table > <br>
<tr><td>0 - some txt</td></tr> <br>
<tr><td>1 - some txt</td></tr> <br>
  <tr><td>2 - some txt</td></tr> <br>
  <tr><td>3 - some txt</td></tr> <br>
  <tr><td>4 - some txt</td></tr>       <br>
</table>

Kesimpulan

Menggunakan CSS dan JavaScript, ia agak mudah untuk menambah atau meningkatkan kebolehbacaan kod kami tanpa perlu menjana semula halaman HTML dari aplikasi pelayan. Seperti yang telah kita lihat di sini, ia juga boleh ditambah pada halaman HTML statik. Untuk melihat contoh -contoh ini dalam tindakan, muat turun fail HTML yang mengandungi kod.

Soalan Lazim (Soalan Lazim) Mengenai Menukar Warna Latar Belakang Dalam JavaScript

Bagaimana saya boleh menukar warna latar belakang baris tertentu dalam jadual menggunakan JavaScript? Berikut adalah contoh:

document.getElementById ("MyRow"). Style.backgroundColor = "Red";
// atau
Document.QuerySelector ("#myrow"). Anda boleh menggantikan "merah" dengan nama warna atau kod warna yang sah.

Bolehkah saya menukar warna latar belakang pelbagai baris sekaligus? Anda boleh menggunakan kaedah QuerySelectorall untuk memilih semua baris yang ingin anda ubah, dan kemudian gunakan gelung untuk menukar warna latar belakang setiap baris. Berikut adalah contoh:

var rows = document.QuerySelectorAll (". Myrows"); Anda boleh menggantikan "biru" dengan mana -mana nama warna atau kod warna yang sah.

Bagaimana saya boleh menukar warna latar belakang baris apabila saya mengklik padanya? Berikut adalah contoh:

document.getElementById ("MyRow"). OnClick = function () {
this.style.backgroundColor = "Green"; Anda boleh menggantikan "hijau" dengan nama warna atau kod warna yang sah.
Bolehkah saya menukar warna latar belakang baris berdasarkan kandungannya? Anda boleh menggunakan harta InnerHTML untuk mendapatkan kandungan baris, dan kemudian gunakan pernyataan IF untuk menukar warna latar belakang berdasarkan kandungan. Inilah contoh:

var row = document.getElementById ("MyRow"); untuk. Anda boleh menggantikan "kuning" dengan nama warna atau kod warna yang sah.

Bagaimana saya boleh menukar warna latar belakang satu baris apabila saya melayang ke atasnya? Berikut adalah contoh:

#myrow: hover {
latar belakang warna: merah jambu;
}
Dalam contoh ini, "Myrow" adalah id baris yang anda mahu ubah. Anda boleh menggantikan "merah jambu" dengan nama warna atau kod warna yang sah.

Bolehkah saya menukar warna latar belakang baris kembali ke warna asalnya? Anda boleh menyimpan warna asal dalam pembolehubah sebelum anda menukarnya, dan kemudian gunakan pembolehubah ini untuk menukar warna kembali. Berikut adalah contoh:

var row = document.getElementById ("MyRow");

var originalColor = row.style.backgroundColor; ID baris yang anda mahu ubah. Anda boleh menggantikan "ungu" dengan nama warna atau kod warna yang sah.

Bagaimana saya boleh menukar warna latar belakang satu baris setiap beberapa saat? Berikut adalah contoh:

var row = document.getElementById ("MyRow"); Mengembalikan warna rawak. Nombor 2000 adalah selang dalam milisaat (2000 milisaat = 2 saat).

Bolehkah saya menukar warna latar belakang baris berdasarkan keadaan? Anda boleh menggunakan pernyataan jika untuk memeriksa keadaan, dan kemudian tukar warna latar jika keadaan itu benar. Berikut adalah contoh:

var row = document.getElementById ("MyRow");
if (somecondition) {

row.style.backgroundColor = "Orange"; Anda boleh menggantikan "oren" dengan nama warna atau kod warna yang sah.

Bagaimana saya boleh menukar warna latar belakang baris apabila saya memilihnya? Walau bagaimanapun, acara ini tidak biasa digunakan untuk baris jadual, kerana ia biasanya digunakan untuk medan input teks. Pendekatan yang lebih biasa adalah untuk menukar warna latar apabila anda mengklik pada baris, seperti yang dijelaskan dalam Soalan 3.

Bolehkah saya menukar warna latar belakang baris dalam lajur tertentu?

Ya, anda boleh menukar warna latar belakang baris dalam lajur tertentu menggunakan JavaScript. Anda boleh menggunakan harta CellIndex untuk mendapatkan indeks lajur, dan kemudian ubah warna latar belakang baris jika indeks sepadan dengan lajur tertentu. Berikut adalah contoh:

var row = document.getElementById ("MyRow"); lajur tertentu. Anda boleh menggantikan "teal" dengan nama warna atau kod warna yang sah.

Atas ialah kandungan terperinci Alter Jadual Latar Belakang Warna Menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!