Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > อยากสอบถามเกี่ยวกับเรื่อง Dynamic text box และการจัดการ Element ให้สร้างอัตโนมัติขึ้นมาก่อน 2 แถว

อยากสอบถามเกี่ยวกับเรื่อง Dynamic text box และการจัดการ Element ให้สร้างอัตโนมัติขึ้นมาก่อน 2 แถว

เริ่มหัวข้อใหม่

Guest

จากกระทู้นี้

https://www.thaicreate.com/php/forum/044751.html

ผมอยากให้มัน Auto Create ขึ้นมาก่อนบางส่วน จากการดึงข้อมูลภายใน database

สมมุติว่ามี ข้อมูลอยู่ 2 row ให้สร้างอัตโนมัติขึ้นมาก่อน 2 แถว แล้วสามารถจัดการเพิ่ม / ลบได้ตามปกติ

Tag : PHP, JavaScript

Date : 2011-04-07 17:18:51

By : l0gin

View : 1408

Reply : 5

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

ในส่วนของ Body Onload เขียน function javaScript ทำงาน Loop 2 ตัวครับ

Date : 2011-04-07 21:23:37

By : webmaster

No. 2

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

เขียนให้เลยแล้วกันครับ เอาแบบถึก ๆ

Code

ง่าย ๆ ครับ จะใส่กี่แถวก็ใส่ไปครับ

Code (JavaScript)

<html>
<head>
<title>ThaiCreate.Com JavaScript Add/Remove Element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="javascript">
	function CreateNewRow()
	{
		var intLine = parseInt(document.frmMain.hdnMaxLine.value);
		intLine++;
			
		var theTable = document.all.tbExp
		var newRow = theTable.insertRow(theTable.rows.length)
		newRow.id = newRow.uniqueID
		
		var item1 = 1
		var newCell
		
		//*** Column 1 ***//
		newCell = newRow.insertCell(0)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column1_"+intLine+"\" VALUE=\"\"></center>"

		//*** Column 2 ***//
		newCell = newRow.insertCell(1)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column2_"+intLine+"\" VALUE=\"\"></center>"		
		
		//*** Column 3 ***//
		newCell = newRow.insertCell(2)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column3_"+intLine+"\" VALUE=\"\"></center>"				
		
		//*** Column 4 ***//
		newCell = newRow.insertCell(3)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column4_"+intLine+"\" VALUE=\"\"></center>"		
		
		//*** Column 5 ***//
		newCell = newRow.insertCell(4)
		newCell.id = newCell.uniqueID
		newCell.setAttribute("className", "css-name");
		newCell.innerHTML = "<center><INPUT TYPE=\"TEXT\" SIZE=\"5\" NAME=\"Column5_"+intLine+"\" VALUE=\"\"></center>"			
		
		document.frmMain.hdnMaxLine.value = intLine;
	}
	
	function RemoveRow()
	{
		intLine = parseInt(document.frmMain.hdnMaxLine.value);
		if(parseInt(intLine) > 0)
		{
				theTable = (document.all) ? document.all.tbExp : 
				document.getElementById("tbExp")
				theTableBody = theTable.tBodies[0];
				theTableBody.deleteRow(intLine);
				intLine--;
				document.frmMain.hdnMaxLine.value = intLine;
		}	
	}	
</script>
<body Onload="CreateNewRow();CreateNewRow();CreateNewRow();">
<form name="frmMain" method="post">
<table width="445" border="1" id="tbExp">
  <tr>
    <td><div align="center">Column 1 </div></td>
    <td><div align="center">Column 2 </div></td>
    <td><div align="center">Column 3 </div></td>
    <td><div align="center">Column 4 </div></td>
    <td><div align="center">Column 5 </div></td>
  </tr>
</table>
<input type="hidden" name="hdnMaxLine" value="0">
<input name="btnAdd" type="button" id="btnAdd" value="+" onClick="CreateNewRow();">
<input name="btnDel" type="button" id="btnDel" value="-" onClick="RemoveRow();">
</form>
</body>
</html>

Screenshot

Ajax Auto Create Element

Date : 2011-04-07 21:28:02

By : webmaster

No. 3

Guest

ขอบคุณมากครับคุณวิน

Date : 2011-04-08 10:45:07

By : l0gin

No. 4

first

โพสกระทู้ ( 51 )
บทความ ( 0 )

พึ่งรู้เหมือกันนะเนี่ย ว่า เรียก ฟังชั่นแบบนี้ได้ด้วย

<body Onload="CreateNewRow();CreateNewRow();CreateNewRow();">

ขอบคุณครับ

Date : 2011-04-08 10:49:50

By : silasakk

No. 5

peterXP

โพสกระทู้ ( 875 )
บทความ ( 1 )

อีกทางเลือกครับ เผื่อชอบ view source เอานะ

http://www.websitethailand.biz/testzone/jquery/form.html

Date : 2011-04-08 11:56:20

By : peterxp

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : อยากสอบถามเกี่ยวกับเรื่อง Dynamic text box และการจัดการ Element ให้สร้างอัตโนมัติขึ้นมาก่อน 2 แถว

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก