html - 用于跟踪库存数量的简单 JavaScript 程序

Question

我有这个 Javascript 数据存储，它是 TiddlyWiki (fyi) 的一部分，用于按 SKU 存储产品。但是我不确定如何制作表格来更新它。我希望表单检索 ID 中可用的产品数量GetAmount。用户可以选择添加、减去或更新该值，然后使用该Update函数将其保存。新金额也应显示在金额字段中。这看起来应该很简单，但我对 HTML 表单的了解还不够，不知道该怎么做。

这是我到目前为止所拥有的一个小提琴。http://jsfiddle.net/Arlen22/pCDx3/

Answer 1

忘记使用 html 表单提交数据。您的数据源直接连接到您的 javascript，因此您可以跳过回发和代码隐藏内容。为了简单起见，我会使用 jQuery，但您也可以使用原生 javascript 来实现。如果您决定学习和使用 jQuery，那么它的文档很完善，如果您问我，那么值得花时间学习。

此示例应该有助于您入门，请随时根据需要对其进行编辑和评论：

html

<fieldset class="stock-control">

    <legend>Edit Stock Amount</legend>

    <label>ID:</label>
    <input type="text" id="txt-id">

    <label>Amount:</label>
    <input type="text" id="txt-change"><br />

    <input type="button" id="btn-add" value="Add">
    <input type="button" id="btn-sub" value="Subtract">
    <input type="button" id="btn-set" value="Set">

    <br />
    <label>In stock: </label><span id="lbl-total"></span>

</fieldset>

<fieldset class="stock-control">

    <legend>Edit Stock Amount</legend>

    <label>ID:</label>
    <input type="text" class="txt-id">

    <label>Amount:</label>
    <input type="text" class="txt-change"><br />

    <input type="button" class="btn-add" value="Add">
    <input type="button" class="btn-sub" value="Subtract">
    <input type="button" class="btn-set" value="Set">

    <br />
    <label>In stock: </label><span class="lbl-total"></span>

</fieldset>

Javascript

// Your code

$(function () {

    $('.stock-control').each(function () {

        var $control = $(this);
        var $id = $control.find('.txt-id');
        var $amount = $control.find('.txt-amount');
        var $total = $control.find('.lbl-total');

        function RenderAmount() {
            $total.text(StockRecorder.GetAmount($id.val()));
        };

        $('.btn-add').click(function () {
            var stock = parseInt($total.text()) + parseInt($amount.val());
            StockRecorder.Update($id.val(), stock);
            RenderAmount();
        });

        $('.btn-sub').click(function () {
            var stock = parseInt($total.text()) - parseInt($amount.val());
            StockRecorder.Update($id.val(), stock);
            RenderAmount();
        });

        $('.btn-set').click(function () {
            StockRecorder.Update($id.val(), parseInt($amount.val()));
            RenderAmount();
        });

        // Initialize
        RenderAmount();

    });

});

注意：当在 id 文本框中输入/更改了 id 时，您需要一个按钮或一个调用 RenderAmount() 函数的事件。在我的例子中，我假装它已经被填写了。

顺便说一句，这似乎是一个有趣的项目，你已经掌握了。好好享受！:) ​</p>