0

「アイテムを追加」ボタンのあるページがあります。このボタンをクリックすると、ajax 呼び出しが行われ、入力された sku に基づいてデータベースからすべての情報を含むテーブルが返されます。(ダミー データはテスト用に用意されています。) ボタンが 1 回だけクリックされた場合、qty 値の増減に問題はありません。ボタンが 2 回以上クリックされた場合、2 番目のテーブルのインクリメント ボタンをクリックすると、最初のテーブルの値が増加します。

作成された各テーブルに一意の番号を与えるカウンターを追加しました。私がやりたいことは、インクリメントされている特定のテーブルのカウンター番号を決定し、それを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 に答える