Printable View
سلام مي خواستم بدونم كه آيا ما مي تونيم به صورت پويا كدي رو با جاوا اسكريپت بنويسيم كه تعدادي Textbox و CheckBox و Button به صفحه ي ما اظافه كنه.منظورم اينه كه فرض كنيد ما يك دكمه تو صفحه داريم با نام Add كه اگه كاربر روي اون كليك كرد يه TextBox و Check Box و Button (با همون نام Add) به صفحه اظافه بشه و اگه كاربر دوباره رو دكمه ي Add جديد ما كليك كرد همين اتفاق دوباره بيفته
سلام.
بله امکان پذیره، با استفاده از dom می تونید اینکار رو انجام بدید، مثال:
window.onload = function() {
var txt = document.createElement("input");
txt.setAttribute("type", "textbox");
document.getElementsByTagName("body")[0].appendChild(txt);
};
ممنون از راهنماییتون ولی این آرایه ای که برای تگ body در نظر گرفته اید چه مقادیری میتواند داشته باشد.اندیس صفر این آرایه شامل چه مقداری است؟نقل قول:
نوشته شده توسط Amin eHelp
و اینکه اگه من این کد رو بخوام بعد از مثلا چند تا <div> تو در تو و داخل یه فرم نمایش بدم چه کار باید کنم؟
اون یه مثال بود، و آرایه با مقدار 0 هم یعنی اولین تگ body موجود در صفحه، بخاطر خصلت getElementsByTagName باید از آرایه استفاده کرد. در ضمن شما می تونید بجای استفاده از آرایه از متد item هم استفاده کنید که کارایی مشابهی دارند. ( یک آرگومان از نوع صحیح می گیره که باید مقدار دهی بشه )نقل قول:
نوشته شده توسط yasercomeng
مورد دوم هم ساده ترین راهش این هست که یک id به المنت مربوطه اختصاص بدید و با استفاده از getElementById اینکار رو انجام بدید.
window.onload = function() {
var txt = document.createElement("input");
txt.setAttribute("type", "textbox");
document.getElementById("myform").appendChild(txt) ;
};
حالا اگه بخوایم یه textbox یا یه دکمه رو از صفحه حذف کنم باید چی کار کنم؟
پیشنهاد می کنم کمی در رابطه با dom scripting جستجو کنید...نقل قول:
نوشته شده توسط yasercomeng
window.onload = function() {
// <p id="ps">something...</p>
var pss = document.getElementById("ps");
document.getElementsByTagName("body")[0].removeChild(pss);
};
نقل قول:
نوشته شده توسط Amin eHelp
excuse me for asking too many question.but i attemp to do that functionality you said to me.i make this code but it didn't work anymore.کد HTML:<html>
<head>
<script language="javascript">
function AddElement(var value)
{
var txt = document.createElement("input");
var tr = document.createElement("tr");
var td = document.createElement("td");
txt.setAttribute("type", "textbox");
txt.setAttribute("name", "textbox"+value);
document.getElementByTagName("table")[0].appendChild(tr);
document.getElementByTagName("tr")[0].appendChild(td);
document.getElementByTagName("td")[0].appendChild(txt);
}
</script>
</head>
<body>
<form name="SubmitForm" method="POST">
<table>
<tr><td><input type="text" name="Textbox1"><input type="button" name="Addbutton1" onclick="AddElement(2)"/></td></tr>
</table>
</form>
</body>
</html>
نقل قول:
excuse me for asking too many question.but i attemp to do that functionality you said to me.i make this code but it didn't work anymore.
function AddElement(value)
{
var txt = document.createElement("input");
txt.setAttribute("type", "textbox");
txt.setAttribute("name", "textbox"+value);
var tbl=document.getElementsByTagName("table")[0];
var row=tbl.insertRow(tbl.rows.length);
var cell=row.insertCell(0);
cell.appendChild(txt);
}
سلام.خسته نباشيد.
من از راهنمايي هايتون استقاده كردم.اما يه مشكل تو يه بخش ديگه از كارم دارم.من كد زير رو نوشتم، اگه ملاحظه كنيد من مي خواهم كه به button اي كه به طور ديناميك توليد مي كنم، متدي كه موقع onclick شدن فراخواني بشه رو مي دهم. اما اين كد كار نمي كنه؟
مي خواستم بدونم كه چه طور مي تونيم به يه عنصري كه به طور دايناميك توليد مي شه، متدي كه موقع اجراي يكي از event هاي اون عنصر قراره اجرا بشه رو بشناسونم؟
يه سؤال ديگه هم داشتم و اونم اينه كه وقتي وارد متدي شدم ( كه مثلاً توسط رويداد onclick فراخواني مي شه) چه طور مي تونم اطلاعات فراخواننده (مثلاً اسم عنصري كه اين رويداد رو فراخواني كرده) رو بدست بيارم؟
کد HTML:<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function addItem()
{
var nextNum=document.getElementById("Counter").value;
var txt = document.createElement("input");
txt.setAttribute("type", "textbox");
txt.setAttribute("name", "textbox"+(++nextNum));
var btn=document.createElement("input");
btn.setAttribute("type","button");
btn.setAttribute("name","rbtm"+(++nextNum));
btn.setAttribute("value","Remove")
if(window.addEventListener)
btn.addEventListener("onclick",rmvItem,false);
else
btn.attachEvent("onclick",rmvItem);
var tbl=document.getElementsByTagName("table")[0];
var row=tbl.insertRow(tbl.rows.length);
var txtCell=row.insertCell(0);
var btnCell=row.insertCell(1);
txtCell.appendChild(txt);
btnCell.appendChild(btn);
document.getElementsByTagName("Counter").value=nextNum;
}
function rmvItem()
{
alert("Hello");
}
</script>
<title>Hello!</title>
</head>
<body>
<form method="post" action="" name="Dform">
<input type="hidden" id="Counter" name="Counter" value="0" />
<table>
<tr><td><input type="text" name="textbox0"/></td><td><input type="button" value="AddAuthor" onclick="addItem()" /> </td></tr>
</table>
<input type="submit" name="EditButton" />
</form>
</body>
</html>
لازم نیست از addEventListener استفاده کنی، با همین setAttribute اینکار رو بکن:نقل قول:
من از راهنمايي هايتون استقاده كردم.اما يه مشكل تو يه بخش ديگه از كارم دارم.من كد زير رو نوشتم، اگه ملاحظه كنيد من مي خواهم كه به button اي كه به طور ديناميك توليد مي كنم، متدي كه موقع onclick شدن فراخواني بشه رو مي دهم. اما اين كد كار نمي كنه؟
مي خواستم بدونم كه چه طور مي تونيم به يه عنصري كه به طور دايناميك توليد مي شه، متدي كه موقع اجراي يكي از event هاي اون عنصر قراره اجرا بشه رو بشناسونم؟
btn.setAttribute("onclick","rmvItem();");
برای نام عنصر به راحتی میتونه نام اونو به تابع پاس بدی.نقل قول:
يه سؤال ديگه هم داشتم و اونم اينه كه وقتي وارد متدي شدم ( كه مثلاً توسط رويداد onclick فراخواني مي شه) چه طور مي تونم اطلاعات فراخواننده (مثلاً اسم عنصري كه اين رويداد رو فراخواني كرده) رو بدست بيارم؟
مثلا در این کدت باید setAttribute رو به این شکل تغییر بدی:
btn.setAttribute("onclick","rmvItem(this.name);");
و تابع:
function rmvItem(name)
{
alert(name);
}
ضمنا این روشی که برای به دست اوردن nextNum استفاده کردی غلطه، چون در هر بار فراخوانی تابع addItem این مقدار از 0 شروع میشه، اونو بالا تابع به این شکل تعریف کن:
var nextNum=0;
این کد Cross Browser تر عمل میکنهنقل قول:
نوشته شده توسط yasercomeng
btn.onclick = function(){ rmvItem(); };