Membuat Format Stripy Grid

Untuk sapa aja yang pengen membuat Stripy Grid (tabel data) dengan warna-warni menarik menggunakan Active Server Pages (ASP) dan Macromedia/Adobe Dreamweaver bisa coba tips sederhana ini. Tabel diatas adalah tabel sederhana yang menampilkan semua data master barang dengan kode ASP seperti dibawah ini.

<table>
<tr>
<td width="47" bgcolor="#666666">Kode</td>
<td width="109" bgcolor="#666666">Nama Barang</td>
</tr>
<% While ((Repeat1__numRows <> 0) AND (NOT qryBarang.EOF))%>
<tr>
<td><%=(qryBarang.Fields.Item("KODE").Value)%></td>
<td><%=(qryBarang.Fields.Item("NAMA").Value)%></td>
</tr>
<% Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
qryBarang.MoveNext()
Wend %>
</table>

Aku asumsikan, tabel sudah diberikan Repeat Region sehingga data bisa ditampilkan secara parsial atau keseluruhan. Dan dibawah ini adalah stripy grid dengan warna biru muda untuk baris yang genap.

Pertanyaannya adalah, kode ASP-nya seperti apa agar terbentuk stripy grid seperti diatas ???

<table>
<tr>
<td width="47" bgcolor="#666666">Kode</td>
<td width="109" bgcolor="#666666">Nama Barang</td>
</tr>
<% While ((Repeat1__numRows <> 0) AND (NOT qryBarang.EOF)) %>
<% if (Repeat1__Index mod 2) = 1 then
response.Write("<tr bgcolor=#E6FFE6>")
else response.Write("<tr bgcolor=#FFFFFF>")
end if %>
<!-- <tr>-->

<td><%=(qryBarang.Fields.Item("KODE").Value)%></td>
<td><%=(qryBarang.Fields.Item("NAMA").Value)%></td>
</tr>
<% Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
qryBarang.MoveNext()
Wend %>
</table>

Hanya dengan menambahkan kode pada baris 06 sampai baris 10 (ditebeli) serta menghilangkan tag <TR> udah membentuk stripy grid sesuai keinginan kita.

Semoga bermanfaat… terutama buat aku karna posting ini sekaligus untuk arsip kalo aku lupa kodenya… hehehe.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s