We'll got stuck my self in adding row using javascript, It seemed doesn;t work at a time I click on the button "tambah Barang" do I missed something..??please help..
Thanks
<?php
include_once "config.php";?>
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript">
var idrow = 2;
function tambah() {
var x=document.getElementById('datatabel');
var td1=x.insertCell(0);
var td2=x.insertCell(1);
var td3=x.insertCell(2);
var td4=x.insertCell(3);
var td5=x.insertCell(4);
td1.innerHTML="<select name='nama[]' onchange='document.getElementById(\'harga\').value=prdName[this.value]'><?php
$result = mysql_query("select * from barang");
echo "<option>-------</option>";
while ($row = mysql_fetch_array($result)) {
echo "<option value='".$row['brg_id']."'>" . $row['brg_nm_barang']."</option>";
$jsArray .= "prdName['" . $row['brg_id'] . "'] = '" . addslashes($row['brg_harga']) . "';\n";
} ?></select>";
td2.innerHTML="<input type='text' name='harga[]' size='20' id='harga' class='harga'/>";
td3.innerHTML="<center>x</center>";
td4.innerHTML="<input type='text' name='item[]' size='15' class='item'>";
td5.innerHTML="<input type='text' name='jum[]' size='20' class='jum' disabled='true'>";
idrow++;
}
function hapus(){
if(idrow>2){
var x=document.getElementById('datatabel').deleteRow(idrow-1);
idrow--;
}
}
</script>
<table id="datatabel" style="margin: 5px 0 5px 120px;">
<tr style="background: #C05F00;">
<th style="text-align: center;">Barang</th>
<th style="text-align: center;">Harga</th>
<th style="text-align: center;">x</th>
<th style="text-align: center;">Item</th>
<th style="text-align: center;">Total</th>
</tr>
<tr>
<td>
<?php
$result = mysql_query("select * from barang");
$jsArray = "var prdName = new Array();\n";
echo '<select name="nama[]" class="nama">';
echo '<option>-------</option>';
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row['brg_id'] . '">' . $row['brg_nm_barang'] . '</option>';
$jsArray .= "prdName['".$row['brg_id']."']='". addslashes($row['brg_harga']) . "';\n";
}
echo '</select>';
?>
</td>
<td>
<input type="text" name="harga[]" id="harga" class="harga" size="20"/>
</td>
<td style="text-align: center;">x</td>
<td><input type="text" name="item[]" class="item" size="15"/></td>
<td><input type="text" name="jum[]" class="jum" size="20" disabled='true'/></td>
</tr>
</table>
<!-- tambahkan setelah tag </table> -->
<script type="text/javascript">
<?php echo $jsArray; ?>
$(function(){
$(".harga").live('keyup',function(){
var jum = $(this).parent().next().next().next().find('.jum');
var item = $(this).parent().next().next().find('.item');
$(jum).val($(this).val() * $(item).val());
});
$(".item").live('keyup',function(){
var jum = $(this).parent().next().find('.jum');
var harga = $(this).parent().prev().prev().find('.harga');
$(jum).val($(this).val()*$(harga).val());
});
$(".nama").live('change', function(){
var harga = $(this).parent().next().find('.harga');
$(harga).val(prdName[$(this).val()]);
});
});
</script>
<div class="tbh">
<input type="button" value="tambah baris" onclick="tambah();">
<input type="button" value="hapus baris" onclick="hapus();">
</div>