Berikut ini adalah kode untuk membuat tampilan tabel pemesanan seperti gambar diatas:
<em><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>aMRe's Cafe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {color: Pink}
.style3 {color: Blue}
.style4 {color: #FF9900}
.style5 {color: #FF0000}
.style7 {
color: #FF0000;
font-size: 9px;
font-weight: bold;
}
.style9 {
color: #A4C931;
font-weight: bold;
font-style: italic;
font-size: 9px;
}
.style10 {
color: Red;
font-weight: bold;
}
.style11 {color: #0C0082}
-->
</style>
<!fungsi matematis tabel>
<script language = "JavaScript" type="text/JavaScript">
<!--
function cafe()
{
var catat = document.formcafe;
var hargawortel = parseInt(catat.pass.value) * parseInt(catat.passwordaa.value);
var hargabayam = parseInt(catat.rok.value) * parseInt(catat.rokokaa.value);
var hargabrokoli= parseInt(catat.mb.value) * parseInt(catat.minaa.value);
var hargabawangputih = parseInt(catat.ku.value) * parseInt(catat.kueaa.value);
var hargabawangmerah= parseInt(catat.mi.value) * parseInt(catat.mieaa.value);
var total = hargapassword + hargarokok + hargaminumanbotol+ hargakue + hargamie;
if (total > 10000)
{
catat.TotalBayar.value = total;
catat.Diskon.value = 1000;
catat.JumlahBayar.value = total - parseInt(catat.Diskon.value);
}
else
{
catat.TotalBayar.value = total;
catat.Diskon.value = 0;
catat.JumlahBayar.value = total;
}
}
function start(){
document.formcafe.reset();
}
//-->
</script>
</head>
<body>
<h2 style="text-align:center; color: Blue;" class="style1" >aM_Re's Cafe Casier </h2>
<form name="formcafe" action="#">
<table width="480" border="2" align="center" style="border-">
<tr style="background-">
<th><span class="style10">No</span></th>
<th><span class="style10">Daftar Menu </span></th>
<th><span class="style10">Harga</span></th>
<th><span class="style10">Order</span></th>
</tr>
<tr>
<td width="27"><div style="text-align:center"><strong>1.</strong></div></td>
<td width="181"><strong>Wortel</strong></td>
<td width="118" ><strong>@
<input type="text" name="pass" value="5000" size="10" disabled="disabled">
</strong></td>
<td width="124" ><input name="passwordaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:white">
<td><div style="text-align:center"><strong>2.</strong></div></td>
<td><strong>Bayam</strong></td>
<td><strong>@
<input type="text" name="rok" value="10000" size="10" disabled="disabled">
</strong></td>
<td><input name="rokokaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>3.</strong></div></td>
<td><strong>Brokoli</strong></td>
<td><strong>@
<input type="text" name="mb" value="5000" size="10" disabled="disabled">
</strong></td>
<td><input name="minaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:white">
<td><div style="text-align:center"><strong>4.</strong></div></td>
<td><strong>Bawang Putih</strong></td>
<td><strong>@
<input type="text" name="ku" value="2500" size="10" disabled="disabled">
</strong></td>
<td><input name="kueaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr>
<td><div style="text-align:center"><strong>5.</strong></div></td>
<td><strong>Bawang Merah</strong></td>
<td><strong>@
<input type="text" name="mi" value="6000" size="10" disabled="disabled">
</strong></td>
<td><input name="mieaa" type="text" onkeyup="cafe()" value="0" size="20"></td>
</tr>
<tr style="background-color:Pink">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Total </strong></div>
</div></td>
<td><input name="TotalBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
<tr style="background-color:Purple">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Diskon )*</strong></div>
</div></td>
<td><input name="Diskon" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
<tr style="background-color:Orange">
<td colspan="3"><div style="text-align:center">
<div align="center"><strong>Jumlah Pembayaran </strong></div>
</div></td>
<td><input name="JumlahBayar" type="text" style="text-align:center" disabled="disabled" value="-" size="20"></td>
</tr>
</table>
<p style="text-align:center"> </p>
<p style="text-align:center"><span class="style14">)* </span><span class="style15">:<span class="style16"> <span class="style17">Menunjukkan Jumlah potongan dikarenakan Pemesanan telah melebihi Rp. 10.000,00. Potongan tidak berlaku kelipata</span>n</span></span> <br/>
</p>
<div id="Layer1" style="position:absolute; width:63px; height:23px; z-index:1; left: 600px; top: 326px;">
<input name="button" type="button" onclick="start()" value="N E W" size="15">
</div>
</form>
</body>
</html>
</em>
Comments :
Posting Komentar