masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > teks badan

table 隔列(行)换色效果让表格结构更清淅_其他特效

WBOY

Lepaskan： 2016-05-16 17:45:44

asal

1270 orang telah melayarinya

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>table 隔列换色效果</title> 
<style> 
#test{ background-color:#C96; text-align:center; line-height:2em;} 
.over{background-color:#fff;} 
.out{background-color:#F1F1F1;} 
</style> 
<script> 
window.onload = function(){ 
//returnColor("test"); 
setColor("test"); 
} 
function setColor(id) 
{ 
var trs=document.getElementById(id).getElementsByTagName("tr"); 
for(var i=0; i<trs.length; i++) 
{ 
var tds = trs[i].getElementsByTagName("td"); 
for(var j=0; j<tds.length; j++) 
{ 
if(j%2==1) 
{ 
tds[j].className="over"; 
} 
else 
{ 
tds[j].className="out"; 
} 
} 
} 
} 
</script> 
 
 
<table width="50%" border="0" cellspacing="1" cellpadding="0" id="test"> 
<tr> 
<td>0 </td> 
<td>1 </td> 
<td>2 </td> 
<td>18</td> 
</tr> 
<tr> 
<td>3 </td> 
<td>4 </td> 
<td>5 </td> 
<td>19</td> 
</tr> 
<tr> 
<td>6 </td> 
<td>7 </td> 
<td>8 </td> 
<td>20</td> 
</tr> 
<tr> 
<td>9</td> 
<td>10</td> 
<td>11</td> 
<td>21</td> 
</tr> 
<tr> 
<td>12</td> 
<td>13</td> 
<td>14</td> 
<td>22</td> 
</tr> 
<tr> 
<td>15</td> 
<td>16</td> 
<td>17</td> 
<td>23</td> 
</tr> 
<tr> 
<td>27</td> 
<td>26</td> 
<td>25</td> 
<td>24</td> 
</tr> 
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

表格 Tukar warna setiap baris lain

sumber：php.cn

Artikel sebelumnya：js优化针对IE6.0起作用(详细整理)_javascript技巧 Artikel seterusnya：js 取时间差去掉周六周日实现代码_javascript技巧

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Kemas kini status tidak berfungsi dalam React-Native pada Android Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret...

daripada 2024-04-06 16:54:10

0

1

410

Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...

daripada 2024-04-06 15:49:33

0

1

319

Gaya SASS diutamakan daripada pertanyaan media Saya cuba menggunakan pertanyaan media untuk mengatasi gaya untuk peranti desktop tetapi i...

daripada 2024-04-05 15:03:00

0

1

3396

Paparkan elemen selepas baris baharu blok Pada masa ini saya mempunyai ini: Saya mahu meletakkan div ikon pada penghujung teks, teta...

daripada 2024-04-04 21:45:21

0

1

271

Perlukan bantuan membina kaedah yang mengembalikan nilai tarikh terawal Saya memfaktorkan semula kaedah untuk pangkalan kod warisan yang saya ambil alih. Kaedah i...

daripada 2024-04-04 19:51:19

0

1

1344

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan