Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   трабла с добавлением элементов в div через innerHTML (https://javascript.ru/forum/misc/6913-trabla-s-dobavleniem-ehlementov-v-div-cherez-innerhtml.html)

nmehdiyev 05.01.2010 09:37

трабла с добавлением элементов в div через innerHTML
 
Вот код:
function addjob() 
{
document.getElementById('count_of_jobs').value = parseInt(document.getElementById('count_of_jobs').value) + 1;
var html = '<tr class="create-po-line">'+
    '<td class="list-view-head" align="right" colspan="3"></td><td>Cost</td>'+
    '<td class="list-view-head">Qty</td><td><div id="head_addcol'+document.getElementById('count_of_jobs').value+'">Add. column</div></td>'+
    '<td class="list-view-head">VAT</td><td>Supplier / A/C</td>'+
    '</tr>'+
    '<tr>'+
    '<td class="context_login" align="right">Job name</td><td><input type="text" style="width:150px" id="Jobname'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
    '<td class="context_login" align="right">Cost Estimation</td><td><input type="text" style="width:100px" id="CE_Cost'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
    '<td><input type="text" style="width:100px" id="CE_Qty'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
	'<td><input type="text" style="width:100px" id="CE_Addcol'+document.getElementById('count_of_jobs').value+'" value="1" class="input_text_login" /></td>'+
    '<td><input type="text" style="width:100px" id="CE_VAT'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
    '<td><input type="text" style="width:100px" id="CE_Supplier'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
    '</tr>'+
    '<tr>'+
    '<td class="context_login" align="right">Type</td>'+
	'<td align="left"><select id="Type'+document.getElementById('count_of_jobs').value+' style="width:10px" class="input_text_login" id="Type'+document.getElementById('count_of_jobs').value+'"">'+
<?
///// добавление элементов
?>	 
				  '</select></td>'+
    '<td class="context_login" align="right">Purchase Order</td>'+
	'<td><input type="text" id="PO_Cost'+document.getElementById('count_of_jobs').value+'" style="width:100px" class="input_text_login" /></td>'+
    '<td><input type="text" style="width:100px" id="PO_Qty'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
	'<td><input type="text" style="width:100px" id="PO_Addcol'+document.getElementById('count_of_jobs').value+'" value="1" class="input_text_login" /></td>'+
    '<td><input type="text" style="width:100px" id="PO_VAT'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
	'<td><input type="text" style="width:100px" id="PO_AC'+document.getElementById('count_of_jobs').value+'" class="input_text_login" /></td>'+
    '</tr>';
return html;
}

</script>


и соответственно

<input type="hidden" id="count_of_jobs" value="0" />
<input type="button" value="Add job" class="input_text_login" onclick="document.getElementById('po-content').innerHTML+=addjob();" >
<table width="100%" border="0">
<div id="po-content">
</div>
</table>



проблема:
скажем, я один раз нажал на Add Job..... вышли все новые ячейки - я их заполнил....
теперь, если я добавляю еще один Job, значение веденые в предыдущий раз очищаются.


п.с. название темы надеюсь содержательно-понимательна получилась :)

PeaceCoder 05.01.2010 12:33

http://javascript.ru/tutorial/dom/modify

Gvozd 05.01.2010 19:08

чуточку поясню:
при изменении свойства innerHTML(=,+=), элементы внутри тега создаются с нуля.все
поэтому и обнуление происходит.
для решения этой проблемы, используйте методы из вышеуказанной ссылки


Часовой пояс GMT +3, время: 14:25.