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>

What parts work, and which don't? Can you provide some more information?

Well If you already implement it on borwser, there will be auto calculation in each field, then again at a time I will add more field by using "Tambah Barang" button under the first row, it doesn;t seem to work, do I miss something..?

Thanks
Eddy

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.