0

我有一个带有“添加项目”按钮的页面。单击此按钮时,将进行 ajax 调用并返回一个表,其中包含基于输入的 sku 数据库中的所有信息。(现在有用于测试的虚拟数据。)如果仅单击一次按钮,则增加或减少 qty 值没有问题。如果单击该按钮两次或多次,如果单击第二个表上的增量按钮,它将增加第一个表中的值。

我添加了一个计数器,为创建的每个表提供一个唯一编号。我想我想要做的是弄清楚如何确定正在递增的特定表的计数器编号并将其传递给 javascript 函数,以便它与该特定条目一起使用。

这是带有按钮、ajax 调用和 javascript 的代码:

<script type="text/javascript">
    var count = 1;
    $('#items').live('pageinit',function(event){
        $('#additem').click(function () {
            //alert("add clicked");
            var request = $.ajax({
                url: "http://www.furnguy.com/app-pages/additem.php",
                type: "POST",
                data: {COUNTER : count},
                dataType: "html"
            });

            request.done(function(html) {
                //alert("here");
                if (html != '') {
                    $('#salesitems').append(html).trigger('create');
                }
            });

            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });
            count++;
        });
    });


    function deleteItem() {
        $('table').click(function(){
            $(this).parent().remove();
        });
    };
    function increaseQty() {
        var currentVal = parseInt($("#qty").val());
        if (currentVal != NaN) {
            $("#qty").val(currentVal + 1);
        }
    };
    function decreaseQty() {
        var currentVal = parseInt($("#qty").val());
        if (currentVal != NaN) {
            $("#qty").val(currentVal - 1);
        }
    };



</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
    <div data-role="header">
        <h1>Sales Entry</h1>
    </div><!-- /header -->
    <div data-role="content">
        <div id="main_nav">
            <span style="float: left; display: inline; width: 100px;">
                <label>Enter SKU</label>
            </span>
            <span style="float: left; display: inline; width: 250px;">
                <input type="text" name="initialsku" id ="initialsku" />
            </span>
            <br /><br /><br />
            <button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>

            <!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
            <div id="salesitems"></div>
        </div>
    </div><!-- /content -->
</body>
</html>

这是ajax调用的页面:

<?php
$counter = $_POST['COUNTER'];
?>
<body>

<div data-role="fieldcontain"> 
<div class="addItems"> 
    <table id="myTable" style="border-bottom: 1px solid black;"> 
        <tr> 
            <td style="width: 50px;"> 
                <label for="qty">Qty:</label> 
            </td> 
            <td style="width: 75px;"> 
                <input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
                <input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
                <input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
            </td> 
            <td style="width: 50px;"> 
                <label for="sku">SKU:</label> 
            </td> 
            <td style="width: 350px;"> 
                <input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" /> 
            </td> 
            <td style="width: 50px;"> 
                <label for="retail">Retail:</label> 
            </td> 
            <td style="width: 250px;"> 
                <input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99"  /> 
            </td>
            <td id="tableNumber">
                <?php echo $counter; ?>
            </td> 
        </tr> 
        <tr> 
            <td style="width: 50px;"> 
                <label for="desc">Desc:</label> 
            </td> 
            <td colspan="5"> 
                <input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." /> 
            </td> 
            <td> 
                <input type="button" value="X" onclick="deleteItem();" />
            </td> 
        </tr> 
    </table> 
</div> 
</div>

有人对此有建议吗?我非常感谢您的帮助,因为我已经为此工作了几天。

提前致谢!

4

1 回答 1

1

每次单击该按钮时,都会插入一个带有#qty 输入的新表。当您稍后尝试增加数量时,jQuery 只会在 dom 中找到第一个 #qty:您的第一个表。

您可能应该在您的 qty 输入上设置一个唯一的 id,例如:

<input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />

然后重写增加/减少函数以获取字段的id进行修改。我实际上不会说 PHP,但你明白了

于 2012-04-26T18:41:04.503 回答