Question

我正在尝试为这个表找到一个我用JQuery克隆的解决方案。我能够克隆表并更新ID和NAME属性以避免html冲突。我能够在原来的test期间让这个工作。但是，我的目标是实际提供用户在从产品列表中订购时可以复制的选项。然后，我需要将这一个用户的这些项目导入数据库。我已经读过将这些类似的ID放到数据库中的最好方法是使用一个数组，比如ProductCode [0]等...我试着将这个概念应用到我的应用程序中，但是一旦我添加了数组，就会发现JQuery选中时不再更新剩余的字段。有没有更好的方法来使用可以在运行时克隆的数组，然后可以使用C＃将其导入数据库进行处理？

我用于请求选择的HTML表单：

        <table>
            <tr>
                <td style="width:20%;">
                    <div class="input-group date">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-duplicate addsection"></span>
                        </div>
                        <select class="form-control" id="ProductCode[0]" name="ProductCode[0]" style="border-bottom-color:black!important;border-color:white;">
                            <option selected>Select Product</option>
                            <option value='292' data-description='APRIL Afternoon At the Greenhouse TICKET' data-price='35.00'>AAATG</option>
                            <option value='285' data-description='APRIL AFTERNOON AT THE GREENHOUSE Ticket EARLYBIRD SPECIAL' data-price='30.00'>AAATGearlybird</option>
                            <option value='30' data-description='Organic Adzuki Beans 1/2 Lb' data-price='4.25'>AB12LB</option>
                            <option value='31' data-description='Organic Adzuki Beans 1/4 Lb' data-price='2.25'>AB14LB</option>
                            <option value='29' data-description='Organic Adzuki Beans 1 Lb' data-price='8.00'>AB1LB</option>
                            <option value='47' data-description='Organic Adzuki Seeds 1 Lb' data-price='5.00'>ABS1LB</option>
                            <option value='145' data-description='Alberto&#x27;s Lemon/Garlic Salad Dressing 16 Oz.' data-price='11.00'>Alberto&#x27;s Dressing</option>
                            <option value='241' data-description='Organic Fenugreek Sprouted Beans 4 oz.' data-price='2.00'>APRIL</option>
                            <option value='310' data-description='Organic Fenugreek Sprouted Beans 16 oz' data-price='7.75'>April16oz</option>
                            <option value='309' data-description='Organic Fenugreek Sprouted Beans 8 oz' data-price='4.00'>April8oz</option>
                            <option value='284' data-description='SeaVeggieSpecialAUGUST1Kelp/1Dulse/1TripleBlendPACKAGE of 3' data-price='11.50'>AUGUST</option>
                            <option value='271' data-description='DM Organic Tomato Basil Sauce CASE' data-price='36.00'>BB BasilS case</option>
                            <option value='273' data-description='DM Organic Tomato Chili Sauce CASE' data-price='36.00'>BB ChiliS case</option>
                            <option value='276' data-description='DM Organic Linguine Pasta CASE' data-price='36.00'>BB Lpasta case</option>
                            <option value='277' data-description='DM Organic Extra Virgin Olive Oil 500ML CASE' data-price='84.00'>BB OO 500ML</option>
                            <option value='278' data-description='DM Organic Extra Virgin Olive Oil 750ML CASE' data-price='132.00'>BB OO 750ML</option>
                            <option value='275' data-description='DM Organic Spaghetti Pasta CASE' data-price='36.00'>BB Spasta case</option>
                            <option value='274' data-description='DM Organic Tagliatelle Pasta CASE' data-price='36.00'>BB Tpasta case</option>
                            <option value='272' data-description='DM Organic Tomato Vegetable Sauce CASE' data-price='36.00'>BB VegS case</option>
                            <option value='117' data-description='Organic Mixed Beans 1 Lb' data-price='8.00'>BEEMB</option>
                        </select>
                    </div>
                <td style="width:70%;"><input id="ProductDesc[0]" class="form-control" style="width: 100%; border-bottom-color: black!important; border-color: white;" name="ProductDesc[0]" type="text" value="" /></td>
                <td><input id="quantity[0]" class="form-control" style="width: 50px; border-bottom-color: black!important; border-color: white; text-align: center;" name="quantity[0]" type="text" value="0" placeholder="1" /></td>
                <td>
                    <input id="ProductPrice[0]" class="form-control cost" style="width: 95px; text-align: center; border-bottom-color: black!important; border-color: white;" name="ProductPrice[0]" type="text" value="" placeholder="$0.00" />
                </td>
                <td>
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-eject remove"></span>
                    </div>
                </td>
            </tr>
        </table>

用于在选择“产品ID”字段时更新其余字段的脚本：

$(document).ready(function () {

    $(document).on('change', '#ProductCode[0]', function () {
        var data = "";
        data = $("#ProductCode[0] option:selected").data();
        $("#ProductDesc[0]").val(data.description);
        $("#quantity[0]").val(data.quant);
        $("#ProductPrice[0]").val(data.price);
        $("#DefaultUnitPrice[0]").val(data.price);
    });

});

$(document).ready(function () {
    $(document).on('change', '#quantity[0]', function () {
        var quant = "";
        var data = "";
        data = $("#ProductCode[0] option:selected").data();
        quant = Number($("#quantity[0]").val());
        $("#ProductPrice[0]").val((data.price * quant).toFixed(2));
    });

});

Answer 1

首先，[和]对ID属性无效，ID属性由letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods组成。其次，您可以使用属性选择器使您的事件侦听器更通用（例如$(document).on('change', '[id^=quantity]', function () { ...)（^=是begins-with attribute selector）。最后，您可以使用jquery对象的第二个参数作为手段给出一个选择器上下文。这将减少你必须让jQuery搜索文档的次数。所有这些都归结为以下代码：

$(document).ready(function () {

    $(document).on('change', '[id^=ProductCode]', function () {
        var data = "";
        var curTable = $(this).closest('table');
        data = $("option:selected", curTable).data();
        $(this).val(data.description);
        $("[id^=quantity]", curTable).val(data.quant);
        $("[id^=ProductPrice]", curTable).val(data.price);
        $("[id^=DefaultUnitPrice]", curTable).val(data.price);
    });

});

$(document).ready(function () {
    $(document).on('change', '[id^=quantity]', function () {
        var quant = "";
        var data = "";
        var curTable = $(this).closest('table');
        data = $("option:selected", curTable).data();
        quant = Number($(this).val());
        $("[id^=ProductPrice]", curTable).val((data.price * quant).toFixed(2));
    });

});

但是最后，使用类而不是ID

可能更好

使用JQuery在运行时更新Array值

1 个答案: