Question

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

我添加了一个计数器，为每个创建的表提供唯一编号。我想我想要做的是弄清楚如何确定正在递增的特定表的计数器编号并将其传递给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>

有人对此有任何建议吗？我真的很感激帮助，因为我已经在这里工作了几天了。

提前致谢！

Answer 1

每次单击该按钮时，都会插入一个带有#qty输入的新表。当你稍后尝试增加数量时，jQuery只会找到dom中的第一个#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，但你明白了

增加表中一个td的值

1 个答案: