个人中心
gpt4 book ai didi

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

转载 作者：搜寻专家 更新时间：2023-10-31 22:14:07 24 4
gpt4 key购买 nike

这是我的第一篇文章，我是 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>

最佳答案

长话短说，这是代码(如果我理解正确你想要达到的目标的话):

<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 个隐藏行”的框)，您可以为输入命名，例如 name =条形码...
  • 使用 args 数组中的这些名称来创建命名数组。

希望这对您有所帮助。

关于javascript - 如何在html表格中添加动态行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8882357/

24 4 0
文章推荐： php - Selenium /PHPUnit : End a session when re-using browser sessions?
文章推荐： string - Swift 中的多行字符串
文章推荐： ios - 核心数据错误 : Unsupported expression type (11, SIZE)
文章推荐： php - register_shutdown_function() 和 die()
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com