[英]JQuery and Dynamic Table rows
I am trying to build somewhat of a shopping cart with jquery and I am having a heck of a time figuring out how to go about making it all work. 我正在尝试用jquery来构建购物车,并且花了一点时间来弄清楚如何使其全部工作。
I have a place for someone to buy ad spaces on my website. 我有一个可以在我的网站上购买广告空间的地方。 There will be a table with 5 columns(zip code column(input), service column(select box), ad size(select box), ad price(input readonly), and options column for adding or removing rows. I had everything working correctly until I wanted to add an option for large or small ads and charge a different price according to the ad size. 将有一个包含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>
I stripped my jquery out and started over a few times to try and figure it all out but keep getting stuck on how to add all the inputs up after the selection of an ad size. 我剥离了我的jquery,并开始了几次尝试以解决所有问题,但是在选择广告尺寸之后,一直坚持如何添加所有输入。 Heres the jquery I ended with before I came here 这是我来这里之前结束的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();
});
});
Thanks for your help in advance 谢谢您的帮助
As per my comments above, you need to put your logic into a function, and then re-initialize that function whenever you add a new row. 根据我上面的评论,您需要将逻辑放入函数中,然后每当添加新行时都重新初始化该函数。
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();
});
});
}
Then, call it: 然后,调用它:
$('.addRow').on('click', function() {
$("#adsTable").append($adTableRow);
firstRow = false;
reInit();
//var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val();
});
Here's the working fiddle http://jsfiddle.net/QwnuR/2/ 这是工作中的小提琴http://jsfiddle.net/QwnuR/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.