PDA

View Full Version : سوال: اضافه کردن و حذف کردن تگ به صورت داینامیک



ashrar54
جمعه 09 خرداد 1393, 17:38 عصر
سلام خدمت دوستان ، من می خوام وقتی کاربر عددی را در کادر تعداد وارد می کنه ، بر اساس عدد وارد شده ،تگ درست کنه و وقتی عدد داخل کادر تغییر کنه ، تگ های قبلی پاک شده و بر اساس عدد جدید تگ ایجاد کنه .



فایل HTML :




<div class="Field" id="Field">
<p>
<label>تعداد</label>
<input style="width:50px;" type="text" id="txtCount" onchange="CreateElement(value)" />
</p>
</div>




تابع جاوا اسکریپت :



function CreateElement(count)
{

var element= document.getElementById("Field");
var i=1;
if(count==0 || count=="")
{
return null;
}
while(count)
{
var p=document.createElement("p");
//------------------- label
var label=document.createElement("label");
var text = document.createTextNode('گزینه'+' '+i);
//------------------- input
var input=document.createElement("input");
input.style.width="60px;";
input.type = "text";
input.id="vote"+i;
//---------------------------
label.appendChild(text);
p.appendChild(label);
p.appendChild(input);
element.appendChild(p);
i++;
count--;
}


}





مشکلم اینجاست که وقتی عددی جدید در کادر وارد می کنم تگ های قبلی پاک نمی شوند ( در واقع نتونستم این بخش از کدش رو بنویسم ) دوستان کسی راهنمایی کنه ممنون می شم.

hakan648
جمعه 09 خرداد 1393, 23:15 عصر
همه ی تگ هایی که جدید میسازی رو به یک تگ اصلی بده ( مثلا با ID=container ) و بعد محتویات اون تگ رو حذف کن.

document.getElementById('container').innerHTML = '';

ashrar54
شنبه 10 خرداد 1393, 11:04 صبح
با تشکر از hakan648 (http://barnamenevis.org/member.php?121474-hakan648) تابعش این میشه ولی تو IE کار نمی کنه که فکر کنم مشکل از IE باشه :


function CreateElement(count)
{

var element= document.getElementById("Field");
var exists = document.getElementById("newdiv");
if(exists!=null)
{
exists.remove(this);
}
if(count==0 || count=="")
{
return null;
}


//--------
var newdiv = document.createElement("div");
newdiv.id="newdiv";
//-------------------
var i=1;
while(count)
{
var p=document.createElement("p");
//------------------- label
var label=document.createElement("label");
var text = document.createTextNode('گزینه'+' '+i);
//------------------- input
var input=document.createElement("input");
input.style="width:60px;";
input.type = "text";
input.id="vote"+i;
//---------------------------
label.appendChild(text);
p.appendChild(label);
p.appendChild(input);
newdiv.appendChild(p);

i++;
count--;

}
element.appendChild(newdiv);

}

hakan648
شنبه 10 خرداد 1393, 12:14 عصر
با تشکر از hakan648 تابعش این میشه ولی تو IE کار نمی کنه که فکر کنم مشکل از IE باشه
تابعش چی میشه؟

من کد شمارو بررسی نکردم و نیازی هم به بررسی نداره. سوال شما در مورد حذف کردن محتویات یک المنت هست و بنده هم کد درست رو ارائه کردم خدمتتون.
متوجه نمیشم چرا با وجود اون کد شما همچنان از تابع دیگری ( remove ) استفاده میکنید که معلوم نیست چیه و از کجا اومده.


توضیحات و سازگاری خصوصیت innerHTML با مرورگرهای رایج:
HTML DOM innerHTML Property (http://www.w3schools.com/jsref/prop_html_innerhtml.asp)

نمونه ای هم که نوشتم رو در لینک زیر ملاحظه کنید.
http://jsfiddle.net/tNCL5/6/

ashrar54
شنبه 10 خرداد 1393, 18:05 عصر
من می خواستم بعد از یک سری تگ ها در یک div ، تگ اضافه یا حذف کنم ، من زیاد با جاوا اسکریپت آشنا نیستم .

hakan648
شنبه 10 خرداد 1393, 21:29 عصر
خب باید با جاوا اسکریپت آشنا بشید. من یه روش خیلی ساده به شما معرفی کردم. به نظرم از اول این چند خط کدتون رو بنویسید و سعی کنید با ساختار بهتری این کار رو انجام بدید.
در این صورت هم فهم بهتری از برنامه پیدا خواهید کرد و هم تغییرات بعدی ساده تر خواهد شد.

اگر لینکی که دادم رو مشاهده کرده باشید، من کار اصلی که میخواید رو انجام دادم، با این تفاوت که کد شما پیچیدگی بیشتری داره و یه سری کار اضافه تر انجام میشه.