javascript - JQuery and Dynamic Table rows -
i trying build of shopping cart jquery , having heck of time figuring out how go making work.
i have place buy ad spaces on website. there table 5 columns(zip code column(input), service column(select box), ad size(select box), ad price(input readonly), , options column adding or removing rows. had working correctly until wanted add option large or small ads , charge different price according ad size.
<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>
i stripped jquery out , started on few times try , figure out keep getting stuck on how add inputs after selection of ad size. heres jquery ended before came here
//varible stores 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 ad'></i></td></tr>"; $(document).ready(function() { $('#addtotalbox').val("4.99"); //assign right price amount according users selection $(".ad_size").on('change', function() { //grab value of select box , store in variable var ad_cost = $(this).val(); //insert value pricing box $(this).parent().next().children().find('.addprice').val(ad_cost); //set total box right price according 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(); }); });
thanks in advance
as per comments above, need put logic function, , re-initialize function whenever add new row.
function reinit(){ $(".ad_size").on('change', function() { console.log('test'); //grab value of select box , store in variable var ad_cost = $(this).val(); //insert value pricing box $(this).parent().next().children().find('.addprice').val(ad_cost); //set total box right price according ad size $('input').each(function(index,data) { var value = $(this).val(); }); }); }
then, call it:
$('.addrow').on('click', function() { $("#adstable").append($adtablerow); firstrow = false; reinit(); //var addedadprice = $(this).parent().prev().children().find('.addprice').val(); });
here's working fiddle http://jsfiddle.net/qwnur/2/
Comments
Post a Comment