ورود

View Full Version : اظافه كردن پوياي كد


yasercomeng
یک شنبه 24 آذر 1387, 14:37 عصر
سلام مي خواستم بدونم كه آيا ما مي تونيم به صورت پويا كدي رو با جاوا اسكريپت بنويسيم كه تعدادي Textbox و CheckBox و Button به صفحه ي ما اظافه كنه.منظورم اينه كه فرض كنيد ما يك دكمه تو صفحه داريم با نام Add كه اگه كاربر روي اون كليك كرد يه TextBox و Check Box و Button (با همون نام Add) به صفحه اظافه بشه و اگه كاربر دوباره رو دكمه ي Add جديد ما كليك كرد همين اتفاق دوباره بيفته
eAmin
یک شنبه 24 آذر 1387, 15:28 عصر
سلام.

بله امکان پذیره، با استفاده از dom می تونید اینکار رو انجام بدید، مثال:

window.onload = function() {

var txt = document.createElement("input");
txt.setAttribute("type", "textbox");

document.getElementsByTagName("body")[0].appendChild(txt);
};
yasercomeng
یک شنبه 01 دی 1387, 11:54 صبح
document.getElementsByTagName("body")[0].appendChild(txt);
};[/code]
ممنون از راهنماییتون ولی این آرایه ای که برای تگ body در نظر گرفته اید چه مقادیری میتواند داشته باشد.اندیس صفر این آرایه شامل چه مقداری است؟
و اینکه اگه من این کد رو بخوام بعد از مثلا چند تا <div> تو در تو و داخل یه فرم نمایش بدم چه کار باید کنم؟
eAmin
یک شنبه 01 دی 1387, 17:22 عصر
ممنون از راهنماییتون ولی این آرایه ای که برای تگ body در نظر گرفته اید چه مقادیری میتواند داشته باشد.اندیس صفر این آرایه شامل چه مقداری است؟
و اینکه اگه من این کد رو بخوام بعد از مثلا چند تا <div> تو در تو و داخل یه فرم نمایش بدم چه کار باید کنم؟
اون یه مثال بود، و آرایه با مقدار 0 هم یعنی اولین تگ body موجود در صفحه، بخاطر خصلت getElementsByTagName باید از آرایه استفاده کرد. در ضمن شما می تونید بجای استفاده از آرایه از متد item هم استفاده کنید که کارایی مشابهی دارند. ( یک آرگومان از نوع صحیح می گیره که باید مقدار دهی بشه )

مورد دوم هم ساده ترین راهش این هست که یک id به المنت مربوطه اختصاص بدید و با استفاده از getElementById اینکار رو انجام بدید.


window.onload = function() {

var txt = document.createElement("input");
txt.setAttribute("type", "textbox");

document.getElementById("myform").appendChild(txt);
};
yasercomeng
چهارشنبه 04 دی 1387, 11:26 صبح
حالا اگه بخوایم یه textbox یا یه دکمه رو از صفحه حذف کنم باید چی کار کنم؟
eAmin
چهارشنبه 04 دی 1387, 12:25 عصر
حالا اگه بخوایم یه textbox یا یه دکمه رو از صفحه حذف کنم باید چی کار کنم؟
پیشنهاد می کنم کمی در رابطه با dom scripting جستجو کنید...


window.onload = function() {
// <p id="ps">something...</p>
var pss = document.getElementById("ps");
document.getElementsByTagName("body")[0].removeChild(pss);
};
yasercomeng
یک شنبه 08 دی 1387, 09:15 صبح
window.onload = function() {

var txt = document.createElement("input");
txt.setAttribute("type", "textbox");

document.getElementById("myform").appendChild(txt);
};



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>
<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>
emad_67
یک شنبه 08 دی 1387, 11:22 صبح
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);
}
yasercomeng
سه شنبه 15 بهمن 1387, 15:35 عصر
سلام.خسته نباشيد.
من از راهنمايي هايتون استقاده كردم.اما يه مشكل تو يه بخش ديگه از كارم دارم.من كد زير رو نوشتم، اگه ملاحظه كنيد من مي خواهم كه به button اي كه به طور ديناميك توليد مي كنم، متدي كه موقع onclick شدن فراخواني بشه رو مي دهم. اما اين كد كار نمي كنه؟
مي خواستم بدونم كه چه طور مي تونيم به يه عنصري كه به طور دايناميك توليد مي شه، متدي كه موقع اجراي يكي از event هاي اون عنصر قراره اجرا بشه رو بشناسونم؟
يه سؤال ديگه هم داشتم و اونم اينه كه وقتي وارد متدي شدم ( كه مثلاً توسط رويداد onclick فراخواني مي شه) چه طور مي تونم اطلاعات فراخواننده (مثلاً اسم عنصري كه اين رويداد رو فراخواني كرده) رو بدست بيارم؟


<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>
emad_67
سه شنبه 15 بهمن 1387, 23:34 عصر
من از راهنمايي هايتون استقاده كردم.اما يه مشكل تو يه بخش ديگه از كارم دارم.من كد زير رو نوشتم، اگه ملاحظه كنيد من مي خواهم كه به button اي كه به طور ديناميك توليد مي كنم، متدي كه موقع onclick شدن فراخواني بشه رو مي دهم. اما اين كد كار نمي كنه؟
مي خواستم بدونم كه چه طور مي تونيم به يه عنصري كه به طور دايناميك توليد مي شه، متدي كه موقع اجراي يكي از event هاي اون عنصر قراره اجرا بشه رو بشناسونم؟
لازم نیست از addEventListener استفاده کنی، با همین setAttribute اینکار رو بکن:


btn.setAttribute("onclick","rmvItem();");


يه سؤال ديگه هم داشتم و اونم اينه كه وقتي وارد متدي شدم ( كه مثلاً توسط رويداد onclick فراخواني مي شه) چه طور مي تونم اطلاعات فراخواننده (مثلاً اسم عنصري كه اين رويداد رو فراخواني كرده) رو بدست بيارم؟
برای نام عنصر به راحتی میتونه نام اونو به تابع پاس بدی.
مثلا در این کدت باید setAttribute رو به این شکل تغییر بدی:


btn.setAttribute("onclick","rmvItem(this.name);");

و تابع:


function rmvItem(name)
{
alert(name);
}

ضمنا این روشی که برای به دست اوردن nextNum استفاده کردی غلطه، چون در هر بار فراخوانی تابع addItem این مقدار از 0 شروع میشه، اونو بالا تابع به این شکل تعریف کن:


var nextNum=0;
امید امرایی
چهارشنبه 16 بهمن 1387, 09:06 صبح
if(window.addEventListener)
btn.addEventListener("onclick",rmvItem,false);
else
btn.attachEvent("onclick",rmvItem);


این کد Cross Browser تر عمل میکنه


btn.onclick = function(){ rmvItem(); };