нашел решение вопроса ,подобному моему, но толком не осознал, может кто пояснит?
jQuery - осуществление динамического подсчета
делаю магазин.
при статичном коде - обсчитываю и изменяю поля, как мне требуется.
при попытке добавления блока элементов, мой скрипт подсчета требуется поменять, а как не могу понять.
Код:
<script type="text/javascript">
function TotalSum() {
if(1) {
// Расчитываем сумму покупки
var mail12 = document.getElementById('mail_12').value; // Количество единиц товара
var mail50 = document.getElementById('mail_50').value; // Цена одной единицы
var mail54 = document.getElementById('mail_54').value; // Вес покупки
var tot = mail12*mail50;
// Расчитываем итоговую сумму
var mail53 = tot; // Общая сумма покупки
var input155 = document.getElementById('input_155').value; // Курс юаня
input155 = input155.replace(",",".");
//total = (tot*+input155+25*+input155)+(tot*+input155+25*+input155)*0.25+(mail54*170);
total = (tot*+input155)+(tot*+input155)*0.15+(mail54*250);
tot = accounting.formatMoney(tot, "RUR", 2, " ", ",", "%v %s"); // подставляем его в поле на странице
document.getElementById('mail_53').value = tot;
total = accounting.formatMoney(total, "RUR", 2, " ", ",", "%v %s");
document.getElementById('mail_56').value = total; // подставляем его в поле на странице
//alert('total = ' +total);
};
}
</script>
Часть кода HTML, которые этот скрипт обсчитывает:
<ul>
<!-- duplicate -->
<li>
<div style="position: relative;">
<a name="top"></a>
<table id="table_container"></table>
<br />
<a href="#top"><img style="background: url('/images/stories/apply.gif') no-repeat
scroll 80px -5px transparent;" alt="Добавить товар" id="add" onclick="return add_new_image();">
</a>
<br />
</div>
</li>
<!-- /duplicate -->
</ul>
вот этим скриптом добавляю эту и последующие части блока:
var total = 0;
function add_new_image(){
total++;
jQuery('<tr>')
.attr('id','tr_image_'+total)
.css({lineHeight:'20px'})
/* td */
.append (
jQuery('<td>')
.attr('id','td_title_'+total)
.css({paddingRight:'5px',width:'auto',border:'1px solid'})
/* li */
.append (
jQuery('<li>') .attr('id','id_'+(8+total)) .attr('class','form-line form-line-column')
/* div */
.append(
jQuery('<div>') .attr('id','cid_'+(8+total)) .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Ссылка на страницу:<span class="form-required">*</span></label>')
.attr('id','label_'+(8+total)) .attr('class','form-label-wide') .attr('for','mail_'+(8+total))
)
.append(
jQuery('<input type="text" />')
.attr('id','mail_'+(8+total)) .attr('name','mail_'+(8+total)) .attr('class','form-textbox validate[required]')
.attr('data-type','input-textbox') .attr('tabindex',5+total) .attr('size','30') .attr('value','')
)
)
.append(
jQuery('<div>')
.attr('id','cid_'+(9+total)) .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Ссылка на изображение:</label>')
.attr('id','label_'+(9+total)) .attr('class','form-label-wide') .attr('for','mail_'+(9+total))
)
.append(
jQuery('<input type="text" />')
.attr('id','mail_'+(9+total)) .attr('name','mail_'+(9+total)) .attr('class','cf_inputbox form-textbox') .attr('data-type','input-textbox')
.attr('tabindex',6+total) .attr('size','30') .attr('title','введите адрес страницы с изображенем') .attr('maxlength','150')
)
)
/* /div */
// )
/* /li */
/* li */
// .append (
// jQuery('<li>') .attr('id','id_'+(7+total)) .attr('class','form-line form-line-column')
/* div */
.append(
jQuery('<div>') .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Размер:</label>')
.attr('class','form-label-wide')
)
.append(
jQuery('<input type="text" />')
.attr('id','text_'+(7+total)) .attr('name','text_'+(7+total)) .attr('class','cf_inputbox required')
.attr('tabindex',7+total) .attr('size','30') .attr('maxlength','80') .attr('title','введите размер товара')
)
)
.append(
jQuery('<div>') .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Цвет:</label>')
.attr('id','label_'+(8+total)) .attr('class','cf_inputbox required')
)
.append(
jQuery('<input type="text" />')
.attr('id','text_'+(8+total)) .attr('name','text_'+(8+total)) .attr('class','cf_inputbox required')
.attr('tabindex',8+total) .attr('size','30') .attr('title','введите цвет товара') .attr('maxlength','150')
)
)
/* /div */
// )
/* /li */
/* li */
// .append (
// jQuery('<li>') .attr('id','id_'+(11+total)) .attr('class','form-line form-line-column')
/* div */
.append(
jQuery('<div>') .attr('id','cid_'+(11+(11+total))) .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Количество:<span class="form-required">*</span></label>')
.attr('id','label_'+(11+total)) .attr('class','form-label-wide') .attr('for','mail_units_'+(+total))
)
.append(
jQuery('<input type="text" />')
.attr('id','mail_units_'+(+total)) .attr('name','mail_units_'+(+total)) .attr('class','form-textbox validate[required, Numeric]')
.attr('data-type','input-textbox') .attr('tabindex',9+total) .attr('size','30') .attr('value','')
.attr('onkeyup','TotalSum()')
)
)
.append(
jQuery('<div>') .attr('id','cid_'+(49+(49+total))) .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Цена за единицу ¥:<span class="form-required">*</span></label>')
.attr('id','label_'+(49+total)) .attr('class','form-label-wide') .attr('for','mail_'+(49+total))
)
.append(
jQuery('<input type="text" />')
.attr('id','mail_'+(49+total)) .attr('name','mail_'+(49+total)) .attr('class','form-textbox validate[required, Numeric]')
.attr('data-type','input-textbox') .attr('tabindex',10+total) .attr('size','30') .attr('value','')
.attr('onkeyup','TotalSum()')
)
)
/* /div */
// )
/* /li */
/* li */
// .append (
// jQuery('<li>') .attr('id','id_'+(53+total)) .attr('class','form-line form-line-column')
/* div */
.append(
jQuery('<div>') .attr('id','cid_'+(53+(53+total))) .attr('class','form-input form_element cf_textbox-wide')
.append(
jQuery('<label>Вес:<span class="form-required">*</span></label>')
.attr('id','label_'+(53+total)) .attr('class','form-label-wide') .attr('for','mail_'+(53+total))
)
.append(
jQuery('<input type="text" />')
.attr('id','mail_'+(53+total)) .attr('name','mail_'+(53+total)) .attr('class','form-textbox validate[required, Numeric]')
.attr('data-type','input-textbox') .attr('tabindex',11+total) .attr('size','30') .attr('value','0') .attr('maxlength','6')
.attr('onkeyup','TotalSum()')
)
)
/* /div */
)
/* /li */
)
/* /td */
.append(
jQuery('<td>')
.css({width:'30px',paddingRight:'5px',textAlign:'left',verticalAlign:'top'})
// .css({width:'30px',text-align:'center',vertical-align:'top'})
// .css({paddingRight:'5px',width:'auto',border:'1px solid'})
.append(
jQuery('<span id="progress_'+total+'" class="padding5px"><a href="#" onclick="jQuery(\'#tr_image_'+total+'\').remove();" class="ico_delete"><img src="/images/add_image/delete.png" alt="del" border="0"></a></span>')
)
)
.appendTo('#table_container');
}
$(document).ready(function() {
add_new_image();
});
а вот обсчитать добавляемую часть кода уже мозгов не хватает ((
при каждом добавлении элементы id меняются, блоки могут добавляться и удаляться - значит и нумерация элементов тоже измениться!
думал добавлять вместе с кодом HTML и код JS, который обсчитывает добавляемый блок, но не уверен, что это правильное решение.