Добрый день,
простите, пожалуйста, за нубовский вопрос... Что-то совсем зациклился, и не могу понять, почему у меня при добавлении строки в таблице эта строка появляется на предпоследнем, а не на последнем месте.
Код (html + js):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
</head>
<body bgproperties=fixed>
<p id="ApproxAll">
<p id="Approx_0">
<input type="text" id="ApproxA_0" size=6 placeholder="<A (Moll/L)">
<input type="text" id="ApproxB_0" size=6 placeholder=">B (Moll/L)">
<input type="text" id="ApproxC_0" size=6 placeholder="<C (Da)">
<input type="text" id="ApproxD_0" size=6 placeholder=">D (Da)">
<input type="text" id="ApproxE_0" size=6 placeholder="<E (%)">
<button onclick="DeleteApproximation(0)">X</button> <br> </p>
<br>
</p>
<br>
<button onclick="AddMoreApproximations()">Add More</button>
<script>
var TotalAmountOfApproximations=1;
function AddMoreApproximations()
{ let par = document.createElement("P");
par.id='Approx_'+TotalAmountOfApproximations;
par.innerHTML=
' <input type="text" id="ApproxA_'+TotalAmountOfApproximations+'" size=6 placeholder="<A (Moll/L)">'+
' <input type="text" id="ApproxB_'+TotalAmountOfApproximations+'" size=6 placeholder=">B (Moll/L)">'+
' <input type="text" id="ApproxC_'+TotalAmountOfApproximations+'" size=6 placeholder="<C (Da)">'+
' <input type="text" id="ApproxD_'+TotalAmountOfApproximations+'" size=6 placeholder=">D (Da)">'+
' <input type="text" id="ApproxE_'+TotalAmountOfApproximations+'" size=6 placeholder="<E (%)">'+
' <button onclick="DeleteApproximation('+TotalAmountOfApproximations+')">X</button> <br> ';
document.getElementById('ApproxAll').appendChild(par);
TotalAmountOfApproximations++;
return;
}
function DeleteApproximation(ind)
{ if(TotalAmountOfApproximations==1)
{ document.getElementById('ApproxA_0').value = "";
document.getElementById('ApproxB_0').value = "";
document.getElementById('ApproxC_0').value = "";
document.getElementById('ApproxD_0').value = "";
document.getElementById('ApproxE_0').value = "";
} else
{ TotalAmountOfApproximations--;
for(var i=ind; i<TotalAmountOfApproximations; i++)
{ var next=i+1;
document.getElementById('ApproxA_'+i).value = document.getElementById('ApproxA_'+next).value;
document.getElementById('ApproxB_'+i).value = document.getElementById('ApproxB_'+next).value;
document.getElementById('ApproxC_'+i).value = document.getElementById('ApproxC_'+next).value;
document.getElementById('ApproxD_'+i).value = document.getElementById('ApproxD_'+next).value;
document.getElementById('ApproxE_'+i).value = document.getElementById('ApproxE_'+next).value;
}
var elem = document.getElementById('Approx_'+TotalAmountOfApproximations);
elem.parentNode.removeChild(elem);
}
return;
}
</script>
</body></html>
Тут я создаю строку из 5 label и одной кнопки, у label-ов id должны быть Approx_%d, где %d - номер строки с 0. Вот когда я вызываю добавление этой строки в общую структуру посредством
document.getElementById('ApproxAll').appendChild(par);
полученная срока (хоть и ее id максимальный)
должна засовывается в конец, а попадает она в предпоследнее положение.
Я пробовал через
innerHTML+=...
но тогда если юзер уже заполнил что-то, то эти значения теряются, то есть вроде appendChild по сути.
Помогите, пожалуйста, тыкните мне, почему оно в конец не вставляется.
Спасибо!
