PDA

View Full Version : سوال: طریقه ساخت مجدد تکست باکس توسط کدنویسی


padidehco
شنبه 16 شهریور 1392, 17:15 عصر
سلام دوستان
من این کد را نوشتم
اما فقط یک بار اجرا می شه
من می خوام وقتی که بر روی حرف click کلیک می کنیم
سه تا تکست باکس کنار هم درست کنه
و وقتی دوباره بر روی اون حرف کلیک کردیم دوباره سه تا تکست باکس زیر اون سه تا تکست باکس درست کنه
و این عمل تا 10 بار قابل تکرار باشه
و هر بار اسم تکس باکس ها تکراری نباشه و هر تکست باکس مثل کد زیر شماره گذاری بشه


<form action="#" method="get">
<div id="mydiv"></div>
<a onclick="a()">click</a>
</form>


<script type="text/javascript">
var num=0;
var div =document.getElementById("mydiv");
function a()
{
var tr = document.createElement("tr");
var td = document.createElement("td");
for(num ;num < 3;num++)
{
var input = document.createElement("input");

input.setAttribute("type", "text");
input.setAttribute("name", "name"+num);
input.setAttribute("id","txt"+num);

div.appendChild(tr);
tr.appendChild(td);
td.appendChild(input);

}
}
</script>
sinoser
شنبه 16 شهریور 1392, 17:54 عصر
اینم درستش

var rowCount = 0;
var num=0;
var div =document.getElementById("myTable");
$('#adder').click(function(){
var tr = document.createElement("tr");
var td = document.createElement("td");
for(num ;num < 3;num++)
{
var input = document.createElement("input");

input.setAttribute("type", "text");
input.setAttribute("name", "name"+num);
input.setAttribute("id","txt"+num);

div.appendChild(tr);
tr.appendChild(td);
td.appendChild(input);

}
num = 0;
if(++rowCount==10)
$(this).fadeOut(300);
});



<form action="#" method="get">
<table id="myTable"></table>
<a id="adder">click</a>
</form>
padidehco
شنبه 16 شهریور 1392, 19:14 عصر
کار نمی کنه
qartalonline
شنبه 16 شهریور 1392, 19:44 عصر
کد زیر رو تست کنید:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var num = 0;
var total = 0;
function a() {
if (total >= 30) {
return false;
}
var tc = document.createElement('tr');
var tr = document.getElementById('mydiv').insertBefore(tc);
for (num ;num < (total+3); num++) {
var ch = document.createElement('input');
ch.type = 'checkbox';
ch.name = 'check' + num;
tr.insertBefore(ch);
}
total = total + 3;
}
function source(){
var a = document.getElementById('body').innerHTML;
alert(a);
}
</script>
</head>
<body id="body">
<form action="#" method="get">
<table id="mydiv">

</table>

<a onclick="a()">click</a><br>
<a onclick="source()">view source</a>
</form>
</body>
</html>
jalil_gh
شنبه 16 شهریور 1392, 19:51 عصر
اینم همون کدهای خودتون فقط با چند تا تغییر کوچیک:
var num = 0;
var len = 3; // I added this
var div =document.getElementById("mydiv");
function a()
{
var tr = document.createElement("tr");
var td = document.createElement("td");
for(num ; num < len/*I changed this*/; num++)
{
var input = document.createElement("input");

input.setAttribute("type", "text");
input.setAttribute("name", "name"+num);
input.setAttribute("id","txt"+num);

div.appendChild(tr);
tr.appendChild(td);
td.appendChild(input);
}

len += 3; // I added this
}
padidehco
شنبه 16 شهریور 1392, 20:43 عصر
اینم همون کدهای خودتون فقط با چند تا تغییر کوچیک:
var num = 0;
var len = 3; // I added this
var div =document.getElementById("mydiv");
function a()
{
var tr = document.createElement("tr");
var td = document.createElement("td");
for(num ; num < len/*I changed this*/; num++)
{
var input = document.createElement("input");

input.setAttribute("type", "text");
input.setAttribute("name", "name"+num);
input.setAttribute("id","txt"+num);

div.appendChild(tr);
tr.appendChild(td);
td.appendChild(input);
}

len += 3; // I added this
}

دست شما درد نکنه
خیلی ممنون این کد کار می کنه
padidehco
شنبه 16 شهریور 1392, 21:42 عصر
و اخرین سوال
من اگر بخوام یک دکمه به نام حذف اخر هر سطر بزارم که وقتی کاربر برروی اون کلیک می کنه اون سطر و دکمه حذف مقابلش حذف بشه باید چی کار کنم؟
مثل عکس زیر
110290
jalil_gh
شنبه 16 شهریور 1392, 23:06 عصر
اینو با توجه به کدهای خودتون نوشتم ولی خودم زیاد از این روش خوشم نمیاد.
var num = 0;
var len = 3;
var div =document.getElementById("mydiv");
function a()
{
var tr = document.createElement("tr");
var td = document.createElement("td");


var del = document.createElement('input'); // added this
del.type="button"; // added this
del.value = "delete"; // added this
del.onclick = function() { // added this
tr.parentNode.removeChild(tr);
};

for(num ; num < len; num++)
{
var input = document.createElement("input");

input.setAttribute("type", "text");
input.setAttribute("name", "name"+num);
input.setAttribute("id","txt"+num);

div.appendChild(tr);
tr.appendChild(td);
td.appendChild(input);
}

td.appendChild(del); // added this

len += 3;
}
شما بهتره برای کار کردن با DOM از کتابخانه‌هایی مثل جی‌کوئری استفاده کنید.
برای کار کردن و ایجاد عناصر مشابه تو یه صفحه اکثرا از تمپلت‌های جاوااسکریپت مثل handlebars و mustache استفاده میشه.
برای نوشتن برنامه‌های پیچیده‌تر با جاوااسکریپت هم بیشتر از فریم‌ورکهایی مثل knockout و backbone و ... استفاده میشه که خیلی کارها رو راحت‌تر میکنه و به کدهای شما نظم خاصی میده.
padidehco
یک شنبه 17 شهریور 1392, 08:46 صبح
دست شما درد نکنه
به نظر شما بهتر این کد هایی که من نوشتم به چه صورتی نوشته بشه تا معقول تر باشه
ایا روش دیگه ای هم برای نوشتن این کد ها مد نظرتون هست؟
jalil_gh
یک شنبه 17 شهریور 1392, 09:35 صبح
هزاران روش برای حل یک مساله وجود داره. اینکه این کدها به چه صورت نوشته بشه بستگی به نوع برنامه‌تون داره. اما یه سری توصیه کلی هست که بهتره سعی کنیم رعایت کنیم.
اول اینکه توصیه شده همیشه جاوااسکریپت رو از html جدا کنیم. یعنی از دستورات جاوااسکریپت درون html استفاده نکنیم. مثلا بهتره از این دستورات پرهیز کنیم.

<button onclick="doSomething()">do</button>
و به جاش از متدهایی که جی‌کوئری برای event handling قرار داده استفاده کنیم.
دوم اینکه سعی کنیم فضای گلوبال رو اشغال نکنیم. تو کدهای بالا متغیرهای num و len و div همه تو فضای گلوبال تعریف شده و از همه جا قابل دسترسه. حالا فردا اگه کسی بیاد یه سری کد دیگه به این صفحه اضافه کنه و از این متغیرها استفاده کنه بین این کدها و کدهای اون تداخل ایجاد میشه.
نکته دیگه هم اینه که ما میخاییم کدهامون تو اکثر مرورگرها اجرا بشه. اما با توجه به تفاوت‌هایی که تو مرورگرها هست این کار سختیه. اینجاست که ارزش جی‌کوئری به چشم میاد. پس بهتره اگه یه کار جدی انجام میدیم استفاده از فریم‌ورک‌های جاوااسکریپت رو مدنظر داشته باشیم.
البته این قصه سر دراز داره. شما اگه میخایید در مورد این مسایل بیشتر بدونید میتونید تو گوگل جستجو کنید. با عباراتی مثل javascript best practices
padidehco
یک شنبه 17 شهریور 1392, 18:10 عصر
یه مشکل اساسی داره اون هم اینکه اطلاعات فرم را به ادرس مورد نظر ارسال نمی کنه

حالا چطور باید کاری کنم که متغیر های php و جاوااسکریپت که در فرم به نمایش در میاد را با فرم ارسال کنیم؟