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

【问题标题】：How to add dynamic rows in html table?如何在html表格中添加动态行？
【发布时间】：2012-02-11 12:47:09
【问题描述】：

这是我的第一篇文章，我是 PHP 新手，我正在尝试使用 PHP 构建一个 POS 系统，但我卡在了销售模块中。

问题是当我扫描一个项目的条形码时，它显示在我设置焦点的文本框中，当我单击添加项目按钮但当我对另一个项目重复此步骤时，它会删除第一个项目并替换它对于最新的项目，我已经投入了 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>

【问题讨论】：

PHP 部分在哪里？（我怀疑除了“我只是想学习 PHP，而我的 [基于教程的] 代码不起作用”之外，还有其他事情发生。有关该项目背景的任何其他信息都会很有用。）
您给我们的代码有点太长，请将您的问题缩小到代码的特定部分。
亲爱的，我的问题是我想从mysql向html表添加行，我不能这样做，请在这方面帮助我并忽略上面的代码，我喜欢按照代码你告诉我的。
好的，我需要知道这里发生了什么。你真的得到了裸码（如条形码的数字表示）？然后你也反对使用 jQuery 吗？ jquery.com 如果没有，那么我可能有一些您可以使用的代码。

标签： javascript php dom

【解决方案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>

说来话长：

当您在 input#searchitem 中键入内容时，您需要在表格中插入一个新行
您尚未将其保存在数据库中，首先插入其他列（数量、价格等...）
他们点击更新按钮，新行将插入数据库中，如果一切正常，按钮将显示为“绿色”

这段代码是为了给你一个线索，并把你推向正确的方向（这就像一个概念证明），所以这里有更多的建议（很难给出，因为我仍然不明白你到底想做什么实现）：
全球：

不要只是复制/粘贴此代码，尝试理解它，然后根据自己的需要进行更改

CSS：

使用外部样式表
为表格设置固定列宽

Javascript：

检查条形码是否存在，突出显示该行，如果不可见则将其推入可见区域（或显示一个带有“还有5个隐藏行的框），您可以为输入命名，例如名称=条形码...
使用 args 数组中的这些名称来创建命名数组。

希望这会对您有所帮助。

【讨论】：