如何在html表中添加动态行？

Question

This is my first post and I am new in PHP, i am trying to build a POS system using PHP, but i stuck in sales module.

Problem is when I scan barcode of an item, it display in textbox where i have set focus, and when i click add item button but when i repeat this step for another item(s), it remove first item and replace it with latest item, i have put my 100% but can't figure out why this is happening, that's why please help me in this regards as i know there are so many good developers in php in this forum.

Here is my code for you:

<script type="text/javascript">
 function setFocus(){
   document.getElementById("searchitem").focus();
 }

function change()
{
    var searchitem = document.getElementById('searchitem');
    if(searchitem.value == '')
    {
        searchitem.style.background = 'orange';
    }
    else
    {
        searchitem.style.background = '';
    }
}
</script>



<?php $name = "Mehroz"; ?>
    <SCRIPT language="javascript">
       /* setInterval("SANAjax();",5000);
        $(function(){
          SANAjax = function(){
          $('#dataDisplay').prepend("HI This").fadeIn("slow");

          }

        }) ;  */



       function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 0;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.value = '<?php echo $name;?>';
             element2.size = "15";
            cell3.appendChild(element2);

            var cell4 = row.insertCell(3);
            var element3 = document.createElement("input");
            element3.type = "text";
            element3.size = "25";
            element3.disabled = "disabled";
            cell4.appendChild(element3);

            var cell5 = row.insertCell(4);
            var element4 = document.createElement("input");
            element4.type = "text";
            element4.size = "3";
            element4.disabled = "disabled";
            cell5.appendChild(element4);

            var cell6 = row.insertCell(5);
            var element5 = document.createElement("input");
            element5.type = "text";
            element5.size = "3";
            element5.disabled = "disabled";
            cell6.appendChild(element5);

            var cell7 = row.insertCell(6);
            var element6 = document.createElement("input");
            element6.type = "text";
            element6.size = "5";
            cell7.appendChild(element6);

            var cell8 = row.insertCell(7);
            var element7 = document.createElement("input");
            element7.type = "text";
            element7.size = "5";
            cell8.appendChild(element7);

            var cell9 = row.insertCell(8);
            var element8 = document.createElement("input");
            element8.type = "text";
            element8.size = "10";
            cell9.appendChild(element8);

            var cell10 = row.insertCell(9);
            var element9 = document.createElement("input");
            element9.type = "submit";
            element9.value = "Update";
            cell10.appendChild(element9);




        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }


    </SCRIPT>

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />

</head>

<body onload="setFocus();change();">


<div class="left">
<form action="javascript:addRow('dataTable')" method="POST">
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2">
<input type="submit" value="New Item" name="search">
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form>
</br>
<table width="98%" id="dataTable">
<tr bgcolor="97c950">
<b>
<td align="center" width="3%"></td>
<td align="center" width="5%">S#</td>
<td align="center" width="15%">Barcode</td>
<td align="center" width="27%">Item Name</td>
<td align="center" width="4%">Stock</td>
<td align="center" width="4%">Qty</td>
<td align="center" width="6%">Price</td>
<td align="center" width="6%">Disc.Rs.</td>
<!-- <td align="center" width="7%">Disc.%</td> -->
<td align="center" width="10%">Total</td>
<td align="center" width="23%"></td></tr>

  <!-- <form action="javascript:addRow('dataTable')" method="POST">

    <INPUT type="text" name="add" value=""/>
    <INPUT type="submit" value="Add Row" name="search" />
    </form> -->
        <TR>
            <TD><INPUT type="checkbox" name="chk" /></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="textbox" size="15" /> </TD>
            <TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD>

                                    <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
                                                <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD>
                                                            <TD> <INPUT type="textbox" size="5" /> </TD>
                                                <TD> <INPUT type="textbox" size="5" /> </TD>
                                    <TD> <INPUT type="textbox" size="10" /> </TD>
                                 <TD> <INPUT type="submit" value="Update" /> </TD>

       </TR>

                  </form>


</table>

</div>

Answer 1

Long story short, this is the code ( if I understood correctly what you are trying to achive ):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
    $("#searchitem").focus().filter('input[value!=""]').addClass("orange");
});
</script>
<style type="text/css">
    .orange
    {
        background-color: orange;
    }

    table#dataTable
    {
        empty-cells     : show;
    }

    table#dataTable th
    {
        text-align      : center;
        background-color: #97C950;
    }

    .saved
    {
        background-color: green;
    }

</style>
</head>
<body>
<form action="" method="POST" onSubmit="">
    <input id="searchitem" type="text" size="75" value="" >
    <input type="submit" name="search" value="New Item" >
    <input id="deleteRow" type="button" value="Delete Row" >
</form>

<table style="width:98%;" id="dataTable">
    <tr>
        <th colspan="2" style="width:5%;">S#</th>
        <th style="width:15%;">Barcode</th>
        <th style="width:27%;">Item Name</th>
        <th style="width:4%;">Stock</th>
        <th style="width:4%;">Qty</th>
        <th style="width:6%;">Price</th>
        <th style="width:6%;">Disc.Rs.</th>
        <th style="width:10%;">Total</th>
    </tr>
</table>
<script type="text/javascript">
    $('#searchitem').change(function()
    {
        var t = $('#dataTable');
        t.append('<tr> \
            <td><input type="checkbox"></td> \
            <td>'+t.find('tr').length+'</td> \
            <td><input size="15" type="text" value="'+$(this).val()+'"></td> \
            <td><input size="25" type="text" value=""></td> \
            <td><input size="3" type="text" value=""></td> \
            <td><input size="3" type="text" value=""></td> \
            <td><input size="5" type="text" value=""></td> \
            <td><input size="10" type="text" value=""></td> \
            <td><input size="15" type="text" value=""></td> \
            <td><input type="button" value="Update" onClick="saveItem(event);"></td> \
        </tr>');
    });

    function saveItem(ev)
    {
        // here read all rows from that row, send them via AJAX to the server to be saved
        // you get the current row by looking at ev.currentTarget, something like this in Firefox
        var args = [];
        $(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function(){ args.push( $(this).val() ); });
        $.post(
            'saveItem.php',
            args,
            function(){ $(ev.currentTarget).addClass('saved');} /* this is triggered onSucces */
        );
    }
</script>
</body>
</html>

This is the long story:

• you need to insert a new row in the table when you type something in input#searchitem
• you don't save it in the database yet, first you insert the other columns (quantity, price etc ...)
• them you hit the update button, the new row is inserted in the database and if everithing is OK the button will be colored "green"

This code is to give you a clue and to push you in the right direction (it's like a proof of concept), so here are more recomandations (hard to give beacause I still didn't understod exactly what are you trying to achive):
GLOBAL:

• don't just copy/paste this code, try to undertand it, and change it for your own needs

CSS:

• use external style sheet
• set fixed columns width for the table

Javascript:

• check if the bar code exists, highlight the row, and push it in to the visible area if is not visible (or show a box with " there are 5 more hidden rows), you can give names for the inputs like name=barcode ...
• use those names in the args array to create a named array.

Hope this will help you.