Adding row isn;t working

[eddy007]

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>

[pritaeas]

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

[eddy007]

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