Как добавить динамические строки в HTML-таблицу?

Question

Это мой первый пост, и я новичок в PHP, я пытаюсь построить систему POS с использованием PHP, но я застрял в модуле продаж.

Проблема в том, что когда я сканирую штрих-код элемента, он отображается в текстовом поле, в котором я установил фокус, и когда я нажимаю кнопку добавления элемента, но когда я повторяю этот шаг для другого элемента (ов), он удаляет первый элемент и заменяет его. с последним пунктом я поставил свои 100%, но не могу понять, почему это происходит, поэтому, пожалуйста, помогите мне в этом, поскольку я знаю, что на этом форуме очень много хороших разработчиков на php.

Вот мой код для вас:

<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

Короче говоря, это код (если я правильно понял, что вы пытаетесь достичь):

<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>

Это длинная история:

• вам нужночтобы вставить новую строку в таблицу, когда вы вводите что-то в поле ввода # searchitem
• , вы еще не сохраняете это в базе данных, сначала вставляете другие столбцы (количество, цена и т. д.)
• если вы нажмете кнопку обновления, новая строка будет вставлена ​​в базу данных, и если все в порядке, кнопка будет окрашена в «зеленый» цвет

Этот код должен дать вам подсказку ичтобы подтолкнуть вас в правильном направлении (это как подтверждение концепции), так что вот несколько рекомендаций (трудно дать, потому что я до сих пор не понял точно, что вы пытаетесь достичь):
GLOBAL:

• не просто скопируйте / вставьте этот код, попробуйте выполнить его и измените его для своих собственных нужд

CSS:

• используйте внешний стильлист
• установить фиксированную ширину столбцов для таблицы

Javascript:

• проверьте, существует ли штрих-код, выделите строку и вставьте ее в видимую область, если она не видна (или покажите поле с «есть еще 5 скрытых строк), вы можете дать имена входным данным, например name = barcode ...
• использовать эти имена в массиве args для создания именованного массива.

Надеюсь, это поможетвы.