Sei sulla pagina 1di 3

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st rict.

dtd"> <html> <head> <title>Tabel Order</title> <link rel="stylesheet" type="text/css" href="shop.css"> <script type="text/javascript"> var num = 1; var total_harga = 0; function hitung(type) { if(type > 0) { var pesanan = document.getElementById('pesanan').value; var menu = document.getElementById('menu').value; var harga = document.getElementById('harga').value; var jumlah = document.getElementById('jumlah').value; if(pesanan != '' && menu != '' && harga != '' && jumlah != '') { add_row(pesanan,menu,harga,jumlah,num); num += 1; } else { alert("Data Tidak Lengkap!"); } } document.getElementById('pesanan').value = ""; document.getElementById('menu').value = ""; document.getElementById('harga').value = ""; document.getElementById('jumlah').value = ""; } function add_row(pesanan,menu,harga,jumlah,id) { var subtl = harga * jumlah; //-- table var table = document.getElementById("output"); //-- membuat tag tr tr = document.createElement("tr"); tr.setAttribute('class','conten_output'); //-- membuat tag td td_1 = document.createElement("td"); td_2 = document.createElement("td"); td_3 = document.createElement("td"); td_3.setAttribute('align','right'); td_4 = document.createElement("td"); td_4.setAttribute('align','center'); td_5 = document.createElement("td"); td_5.setAttribute('align','right'); //-- isi kolom td_1.innerHTML td_2.innerHTML td_3.innerHTML td_4.innerHTML td_5.innerHTML = = = = = '<span '<span '<span '<span '<span id="pesanan_'+id+'">'+pesanan+'</span>'; id="menu_'+id+'">'+menu+'</span>'; id="harga_'+id+'">Rp '+harga+'</span>'; id="jumlah_'+id+'">'+jumlah+'</span>'; id="sb_tl_'+id+'">Rp '+subtl+'</span>';

//-- membuat tag /td tr.appendChild(td_1); tr.appendChild(td_2); tr.appendChild(td_3); tr.appendChild(td_4); tr.appendChild(td_5); //-- membuat tag /tr table.appendChild(tr); total_harga += subtl; document.getElementById('total_harga').innerHTML = '<font size=" 2">Rp '+total_harga+'</font>'; } function cek() { var pesanan = document.getElementById('pesanan').value.length; var pesan = document.getElementById("pesan"); if((pesanan > 4)||(pesanan < 4)){ document.getElementById('pesanan').value = ""; pesan.innerHTML = ' <font color="red" size="1">*Kode pes anan harus terdiri dari 4 digit</font>'; } else { pesan.innerHTML = ''; } } </script> </head> <body> <table class="form" cellpadding="3" cellspacing="5"> <tr> <td align="center" id="head"> <span align="center" class="formTitle">INPUT PES ANAN</span></td> </tr> <tr><td> <table class="input" border="0" cellpadding="3" cellspacing="5" onChange ="cek()" > <tr><td colspan="3">Silahkan Masukan Pesanan Anda : </td></tr> <tr > <td width="125">Kode Pesanan</td> <td width="2">:</td> <td ><input name="pesanan" id="pesanan" type="text" size="4" max length="4"><span id="pesan"></span></td> </tr> <tr> <td>Menu yang dipesan</td> <td>:</td> <td><input name="menu" id="menu" type="text" size="30"></td> </tr>

<tr class="alt"> <td>Harga</td> <td>:</td> <td><input name="harga" id="harga" type="text" size="15"></td> </tr> <tr> <td>Jumlah Pesanan</td> <td>:</td> <td><input name="jumlah" id="jumlah" type="text" size="5"></td> </tr> <tr><td colspan="3">&nbsp;</td></tr> <tr class="alt"> <td colspan="3" rowspan="1" style="width: 10px;" align="center"> <button onclick="hitung(1);">OK</button> <button onclick="hitung(0);">CANCEL</button> </td> </tr> </table> </td></tr> </table> <table class="form_output" cellpadding="3" cellspacing="5"> <tr><td><span align="center" class="formTitle">DETAIL PESANAN</span> </td></tr> <tr><td> <table id="output" class="output"> <tr align="center"> <td class="head_output" width="125">Kode Pesanan</td> <td class="head_output">Menu yang Dipesan</td> <td class="head_output" width="125">Harga</td> <td class="head_output" width="125">Jumlah Pesanan</td> <td class="head_output" width="125">Sub Total</td> </tr> </table> </tr></td> <tr><td> <table class="total"> <tr> <td class="head_output">Total Harga</td> <td class="conten_output" align="right" width="125"><span id="total_harga"></s pan></td> </tr> </table> </td></tr> </table> </body> </html>

Potrebbero piacerti anche