Forgot Password ??

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

	Registered : 108,130

HOME > บทความจากสมาชิก > jQuery Dynamic table multi input สร้างแบบฟอร์มสำหรับ Insert ข้อมูลหลายๆ รายการ

jQuery Dynamic table multi input สร้างแบบฟอร์มสำหรับ Insert ข้อมูลหลายๆ รายการ

jQuery Dynamic table multi input สร้างแบบฟอร์มสำหรับ Insert ข้อมูลหลายๆ รายการ ตัวอย่างนี้จะเป็นการใช้ jQuery สร้าง Table rows ที่สามารถเพิ่มลบรายการ rows ของ table ได้ โดยในแต่ล่ะ rows มี Input Textbox สำหรับกรอกข้อมูล เพื่อรับข้อมูลที่ได้นำไปใช้งาน

jQuery Dynamic table multi input สร้างแบบฟอร์มสำหรับ Insert ข้อมูลหลายๆ รายการ

ซึ่งเหมาะสำหรับการออกแบบ Form เป็นแบบ Multiple Input ที่สามารถกรอกข้อมูลได้หลาย ๆ รายการในครั้งเดียว และในตัวอย่างนี้ยังมีการยกตัวอย่างการส่งค่าไปยัง PHP ว่าในกรณีที่มีหลาย ๆ รายการจะสามารถอ่านค่าได้อย่างไร รวมทั้งวิธีการ Validate Input เมื่อ Input รายการใดรายการหนึ่งใน Rows นั้นๆ จะตรวจสอบค่ารายการอื่นๆ ด้วย

Example 1 : สร้าง Table แบบ Dynamic สำหรับ Input ข้อมูล และการอ่านค่าด้วย PHP

page1.php (PHP)

<!DOCTYPE html>
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	var rows = 1;
	$("#createRows").click(function(){
						var tr = "<tr>";
						tr = tr + "<td><input type='text' name='txtCustomerID"+rows+"' id='txtCustomerID"+rows+"' size='5'></td>";
						tr = tr + "<td><input type='text' name='txtName"+rows+"' id='txtName"+rows+"' size='10'></td>";
						tr = tr + "<td><input type='text' name='txtEmail"+rows+"' id='txtEmail"+rows+"' size='15'></td>";
						tr = tr + "<td><input type='text' name='txtCountryCode"+rows+"' id='txtCountryCode"+rows+"' size='5'></td>";
						tr = tr + "<td><input type='text' name='txtBudget"+rows+"' id='txtBudget"+rows+"' size='5'></td>";
						tr = tr + "<td><input type='text' name='txtUsed"+rows+"' id='txtUsed"+rows+"' size='5'></td>";
						tr = tr + "</tr>";
						$('#myTable > tbody:last').append(tr);
					
						$('#hdnCount').val(rows);
						rows = rows + 1;
		});

		$("#deleteRows").click(function(){
				if ($("#myTable tr").length != 1) {
					 $("#myTable tr:last").remove();
				}
		});

		$("#clearRows").click(function(){
				rows = 1;
				$('#hdnCount').val(rows);
				$('#myTable > tbody:last').empty(); // remove all
		});

	});
</script>
<meta charset=utf-8 />
</head>
<body>
 <center>
 <form action="page2.php" id="frmMain" name="frmMain" method="post">
<h1>jQuery Dynamic table input</h1>

<table width="600" border="1" id="myTable">
<!-- head table -->
<thead>
  <tr>
    <td width="91"> <div align="center">CustomerID </div></td>
    <td width="98"> <div align="center">Name </div></td>
    <td width="198"> <div align="center">Email </div></td>
    <td width="97"> <div align="center">CountryCode </div></td>
    <td width="59"> <div align="center">Budget </div></td>
    <td width="71"> <div align="center">Used </div></td>
  </tr>
</thead>
<!-- body dynamic rows -->
<tbody></tbody>
</table>
<br />
<input type="button" id="createRows" value="Add">
<input type="button" id="deleteRows" value="Del">
<input type="button" id="clearRows" value="Clear">
 <center>
 <br>
 <input type="hidden" id="hdnCount" name="hdnCount">
<input type="submit" value="Submit">
 </form>
</body>
</html>

page2.php (PHP)

<!DOCTYPE html>
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset=utf-8 />
</head>
<body>
<?php 

	for ($i = 1; $i<= (int)$_POST["hdnCount"]; $i++){

		if($_POST["txtCustomerID$i"] != "" && 
				$_POST["txtName$i"] != "" &&
				$_POST["txtEmail$i"] != "" &&
				$_POST["txtCountryCode$i"] != "" &&
				$_POST["txtBudget$i"] != "" &&
				$_POST["txtUsed$i"] != "")
		{
			echo "<br>Line $i";
			echo "<br>CustomerID =".$_POST["txtCustomerID$i"];
			echo "<br>Name =".$_POST["txtName$i"];
			echo "<br>Email =".$_POST["txtEmail$i"];
			echo "<br>CountryCode =".$_POST["txtCountryCode$i"];
			echo "<br>Budget =".$_POST["txtBudget$i"];
			echo "<br>Used =".$_POST["txtUsed$i"];
			echo "<hr>";
		}

	}
?>
</body>
</html>

Result

jQuery Dynamic table multi input

การสร้าง Dynamic Rows จาก Table

jQuery Dynamic table multi input

การรับค่า Input จาก Dynamic Table Rows

jQuery Dynamic table multi input

การอ่านค่าจาก PHP

Example 2 : จะเพิ่มการ Validate รายการใน Rows นั้น ๆ เมื่อมีการ Input ช่องใดช่องหนึ่ง

page1.php (PHP)

<!DOCTYPE html>
<html>
<head>
<title>ThaiCreate.Com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	var rows = 1;
	$("#createRows").click(function(){
						var tr = "<tr>";
						tr = tr + "<td><input type='text' name='txtCustomerID"+rows+"' id='txtCustomerID"+rows+"' size='5'></td>";
						tr = tr + "<td><input type='text' name='txtName"+rows+"' id='txtName"+rows+"' size='10'></td>";
						tr = tr + "<td><input type='text' name='txtEmail"+rows+"' id='txtEmail"+rows+"' size='15'></td>";
						tr = tr + "<td><input type='text' name='txtCountryCode"+rows+"' id='txtCountryCode"+rows+"' size='5'></td>";
						tr = tr + "<td><input type='text' name='txtBudget"+rows+"' id='txtBudget"+rows+"' size='5'></td>";
						tr = tr + "<td><input type='text' name='txtUsed"+rows+"' id='txtUsed"+rows+"' size='5'></td>";
						tr = tr + "</tr>";
						$('#myTable > tbody:last').append(tr);
					
						$('#hdnCount').val(rows);
						rows = rows + 1;
		});

		$("#deleteRows").click(function(){
				if ($("#myTable tr").length != 1) {
					 $("#myTable tr:last").remove();
				}
		});

		$("#clearRows").click(function(){
				rows = 1;
				$('#hdnCount').val(rows);
				$('#myTable > tbody:last').empty(); // remove all
		});


		$("#frmMain").submit(function() {

			var bFlag = true;
            $("table#myTable input[id*='txtCustomerID']").each(function (index) {
				var line = index + 1;
                var txtCustomerID = $("table#myTable input[id*='txtCustomerID']").eq(index);
                var txtName = $("table#myTable input[id*='txtName']").eq(index);
				var txtEmail = $("table#myTable input[id*='txtEmail']").eq(index);
				var txtCountryCode = $("table#myTable input[id*='txtCountryCode']").eq(index);
				var txtBudget = $("table#myTable input[id*='txtBudget']").eq(index);
				var txtUsed = $("table#myTable input[id*='txtUsed']").eq(index);

				if($(txtCustomerID).val() != "" ||
					$(txtName).val() != "" ||
					$(txtEmail).val() != "" ||
					$(txtCountryCode).val() != "" ||
					$(txtBudget).val() != "" ||
					$(txtUsed).val() != "")
				{
						
					if($(txtCustomerID).val() == "")
					{
						alert('Please input CustomerID line...' + line);
						bFlag = false;
					}
					if($(txtName).val() == "")
					{
						alert('Please input Name line...' + line);
						bFlag = false;
					}
					if($(txtEmail).val() == "")
					{
						alert('Please input Email line...' + line);
						bFlag = false;
					}
					if($(txtCountryCode).val() == "")
					{
						alert('Please input CountryCode line...' + line);
						bFlag = false;
					}
					if($(txtBudget).val() == "")
					{
						alert('Please input Budget line...' + line);
						bFlag = false;
					}
					if($(txtUsed).val() == "")
					{
						alert('Please input Used line...' + line);
						bFlag = false;
					}

				}

            });

			if(!bFlag) {  return false; }
			return true;
		});

	});
</script>
<meta charset=utf-8 />
</head>
<body>
 <center>
 <form action="page2.php" id="frmMain" name="frmMain" method="post">
<h1>jQuery Dynamic table input</h1>

<table width="600" border="1" id="myTable">
<!-- head table -->
<thead>
  <tr>
    <td width="91"> <div align="center">CustomerID </div></td>
    <td width="98"> <div align="center">Name </div></td>
    <td width="198"> <div align="center">Email </div></td>
    <td width="97"> <div align="center">CountryCode </div></td>
    <td width="59"> <div align="center">Budget </div></td>
    <td width="71"> <div align="center">Used </div></td>
  </tr>
</thead>
<!-- body dynamic rows -->
<tbody></tbody>
</table>
<br />
<input type="button" id="createRows" value="Add">
<input type="button" id="deleteRows" value="Del">
<input type="button" id="clearRows" value="Clear">
 <center>
 <br>
 <input type="hidden" id="hdnCount" name="hdnCount">
<input type="submit" value="Submit">
 </form>
</body>
</html>

Result

jQuery Dynamic table multi input

เมื่อมีการ Input ช่องใดช่องหนึ่งใน Rows นั้นๆ

jQuery Dynamic table multi input

จะ Validate ค่าอื่น ๆ ใน Rows นั้นๆ ด้วย

.


	By :	TC Admin
	Article :	บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ
	Score Rating :
	Create Date :	2017-01-19
	Download :	No files

Sponsored Links

Meta Tags in 2019
กล่าวโดยย่อ Meta เป็นสิ่งสำคัญสำหรับเครื่องมือค้นหาทั้งหมดที่ปรากฏในโค้ด HTML ของหน้าเว็บไซต์และบอกเครื่องมือค้นหาว่าหน้าเว็บนั้นเกี่ยวกับอะไร
Rating :

Update : 2019-11-15 09:26:11

SQL Server 2008 การ SELECT แบบ LIKE % % ใน Query Builder
พอดีวันนี้นั่งเขียนโปแรกรม ฐานข้อมูลลูกค้าอยู่ มีจุดที่ต้องการค้นหา โดยใช้ like % % ซึ่งปกติ ผมจะมักใช้งาน query builder มากว่า มานั่งเขียนโค้ดเองอยู่แล้ว
Rating :

Update : 2018-10-16 10:41:57

PHP ใช้สำหรับเปลี่ยนรูปแบบของวันตามที่เรากำหนด เช่น 2018-3-10 -> 10 Mar 2018 หรือ 10 March 2
ฟังก์ชั่นนี้ใช้สำหรับเปลี่ยนรูปแบบของวันตามที่เรากำหนด เช่น 2018-3-10 -> 10 Mar 2018 หรือ 10 March 2018
Rating :

Update : 2018-03-11 10:49:35

แก้ปัญหา Facebook Like หายเมื่อเปลี่ยนจาก HTTP เป็น HTTPS
ในช่วงนี้หลายๆ เว็บกำลังเปลี่ยน เว็บจาก HTTP เป็น HTTPS และถ้ามีการใช้ Plugin Facebook Like / Shared คงจะเจอปัยหา Line หายกัน
Rating :

Update : 2018-09-18 15:14:43

C# เปลี่ยนชื่อ เพลง ด้วย regext
C# เปลี่ยนชื่อ เพลง ด้วย regext หลายคนมักเจอ เวลาโหลดเพลงมาแล้วมักจะมีตัวเลขข้างหน้าติดมาด้วย เรามาลบมันออกกัน
Rating :

Update : 2019-05-03 12:54:52

การนำ jQuery มาทำ AutoFill แบบ datalist tag ในรูปแบบ MySQLi OOP พร้อมรองรับ UTF8
บทความเรื่อง การนำ jQuery มาทำ AutoFill แบบ datalist tag ในรูปแบบ MySQLi OOP พร้อมรองรับ UTF8 ครับ
Rating :

Update : 2019-09-19 10:59:39

C# อ่านค่า Text file มาเเสดงบน DataGridView
อ่านค่า Textfile.txt มาเเสดงบน DataGridView เเล้วดึงข้อมูลมาแสดงบน Textbox พอเป็นแนวทางสำหรับ คนที่ต้องการนำไปประยุกใช้ครับ
Rating :

Update : 2019-04-23 11:19:42

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว