Question

我有这个Javascript数据存储区，它是用于存储SKU产品的TiddlyWiki（fyi）的一部分。但是我不知道如何制作表格来更新它。我希望表单能够使用GetAmount检索ID中可用的产品数量。用户可以选择添加，减去或更新值，然后使用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（）函数。在我的例子中，我假装已经填写了。

顺便说一句，看起来像是一个有趣的项目，你已经掌握了。好好享受！ :)

简单的javascript程序，用于跟踪库存量

1 个答案: