jQuery和动态表行

debugcn 发表于 Dev

空气饼干

我正在尝试用jquery来构建一个购物车，并且花了一点时间来弄清楚如何使其全部工作。

我有一个地方可以在我的网站上购买广告空间。将有一个包含5列的表格（邮政编码列（输入），服务列（选择框），广告尺寸（选择框），广告价格（输入只读）和用于添加或删除行的选项列。直到我想为大型或小型广告添加选项并根据广告尺寸收取不同的价格为止。

        <table style='width: 100%;' id='adsTable'>
            <tr class='addedRow'>
                <td>Zip</td>
                <td>Service</td>
                <td>Ad Size</td>
                <td>Price</td>
                <td>Options</td>
            </tr>
            <tr>
                <td><input type='text' maxlength='5' class='zip' /></td>
                <td>
                    <select name='serviceType' class='serviceType rounded'>
                        <option value="">Choose One...</option>
                        <option>Plumbing</option>
                        <option>Roofing</option>
                        <option>HVAC</option>
                        <option>Appliance Repair</option>
                        <option>Flooring</option>
                        <option>Electrical</option>
                        <option>Doors/Windows</option>
                        <option>Siding</option>
                        <option>Other</option>
                    </select>
                </td>
                <td>
                    <select name='' class='ad_size'>
                        <option value='4.99' class='ad_lg'>Large</option>
                        <option value='1.99' class='ad_sm'>Small</option>
                    </select>
                </td>
                <td>
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-usd"></i></span>
                        <input class='addPrice' value='4.99' type='text' readonly='readonly' />
                    </div>
                </td>
                    <td class='options'>

                    </td>
            </tr>

        </table>

我剥离了jquery并开始了几次尝试以解决所有问题，但是在选择广告尺寸之后，一直坚持如何添加所有输入。这是我来这里之前结束的jQuery

    //Varible that stores the extra table row
    var $adTableRow = "<tr class='addedRow'><td><input type='text' maxlength='5' /></td><td><select name='serviceType' id='serviceType' class='rounded'><option value=''>Choose One...</option><option>Plumbing</option>    <option>Drain Cleaning</option><option>Roofing</option><option>HVAC</option><option>Appliance Repair</option><option>Flooring</option>  <option>Electrical</option><option>Doors/Windows</option><option>Siding</option><option>Other</option></select></td><td><select name='' class='ad_size'><option value='4.99' class='ad_lg'>Large</option><option value='1.99' class='ad_sm'>Small</option></select></td><td><div class='input-prepend'><span class='add-on'><i class='icon-usd'></i></span><input class='addPrice' value='4.99' type='text' readonly='readonly' /></div></td><td class='options'><i class='icon-remove removeAd' title='Remove This Ad'></i></td></tr>";

    $(document).ready(function() {  
        $('#addTotalBox').val("4.99");
        //Assign the right price amount according to users selection
        $(".ad_size").on('change', function() {
            //Grab the value of the select box and store it in a variable
            var ad_cost = $(this).val();
            //Insert the value into the pricing box             
            $(this).parent().next().children().find('.addPrice').val(ad_cost);
            //Set the total box to the right price according to ad size
            $('input').each(function(index,data) {
                var value = $(this).val();
            });
        });

        $('.addRow').on('click', function() {
            $("#adsTable").append($adTableRow);
            firstRow = false;


            //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();

        });
                });

谢谢您的帮助

用户名

根据我上面的评论，您需要将逻辑放入函数中，然后在添加新行时重新初始化该函数。

function reInit(){
    $(".ad_size").on('change', function() {
        console.log('test');
        //Grab the value of the select box and store it in a variable
        var ad_cost = $(this).val();
        //Insert the value into the pricing box             
        $(this).parent().next().children().find('.addPrice').val(ad_cost);
        //Set the total box to the right price according to ad size
        $('input').each(function(index,data) {
            var value = $(this).val();
        });
    });
}

然后，调用它：

$('.addRow').on('click', function() {
    $("#adsTable").append($adTableRow);
    firstRow = false;

    reInit();
    //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();

});

这是工作中的小提琴http://jsfiddle.net/QwnuR/2/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。