Forgot Password ??

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

	Registered : 108,218

HOME > บทความจากสมาชิก > jQuery สร้าง Dynamic Table สร้าง Rows ของ tr , tbody , td ให้กับ HTML Table

jQuery สร้าง Dynamic Table สร้าง Rows ของ tr , tbody , td ให้กับ HTML Table

jQuery สร้าง Dynamic Table สร้าง Rows ของ tr , tbody , td ให้กับ HTML Table เทคนิคการสร้าง Dynamic Rows ของ Table ด้วย jQuery สร้าง Rows ของ tr , tbody , td ให้กับ HTML Table แบบง่าย ๆ รวมทั้งการ Delete Table Rows และ Clear Table Rows รวบรวมตัวอย่างไว้ในนี้

jQuery

jQuery Create Dynamic Table Rows

<!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(){

	$("#createRows").click(function(){
						var customerid = "val";
						var name = "val";
						var email = "val";
						var countrycode = "val";
						var budget = "val";
						var used = "val";
						var tr = "<tr>";
						tr = tr + "<td>" + customerid + "</td>";
						tr = tr + "<td>" + name + "</td>";
						tr = tr + "<td>" + email + "</td>";
						tr = tr + "<td>" + countrycode + "</td>";
						tr = tr + "<td>" + budget + "</td>";
						tr = tr + "<td>" + used + "</td>";
						tr = tr + "</tr>";
						$('#myTable > tbody:last').append(tr);
		});

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

		$("#clearRows").click(function(){
				//$("#myTable tbody tr:not(:first-child)").remove(); // remove all
				//$("#myBody").empty(); // remove all
				$('#myTable > tbody:last').empty(); // remove all
		});

	});
</script>
<meta charset=utf-8 />
</head>
<body>
 <center>
<h1>jQuery Create table rows / tr / tbody / td</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>
</body>
</html>

Screenshot

jQuery สร้าง Dynamic Table สร้าง Rows


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

Sponsored Links

SSL (https) เป็นเหตุ ถึงเวลาโบกมือลา truehits อย่างเป็นทางการ
เว็บสถิติเก่าแกอย่าง Truethits กับเทคโนโลยี่ SSL (https) ที่ทำให้ต้องโบกมือลาอย่างเป็นทางการซะที
Rating :

Update : 2018-09-13 21:50:11

C#/VB.Net สร้าง Line notify เข้า Line ส่วนตัวหรือ Group สำหรับทำระบบแจ้งเตือนผ่านระบบ line
สร้าง Line notify ด้วย C#.VB.Net สำหรับทำระบบแจ้งเตือนผ่านระบบ line application
Rating :

Update : 2019-04-24 06:39:29

(C#) จัดการ CheckBox ให้เลือก Checkbox เฉพาะตามการแสดงตารางที่ค้นหาข้อมูลในปัจจุบันครับ
บทความเรื่อง (C#) จัดการ CheckBox ให้เลือก Checkbox เฉพาะตามการแสดงตารางที่ค้นหาข้อมูลในปัจจุบันครับ
Rating :

Update : 2019-12-24 16:50:54

7 เหตุผล ที่ไม่ควรใช้ SELECT * เพื่อ Query ข้อมูล
เชื่อว่า Programmer ทุกคน คงเคยใช้คำสั่ง SQL กันมาบ้างแล้ว และคำสั่งพื้นฐานที่ทุกคนถนัดและมักจะใช้กันบ่อยก็คือ SELECT * แต่วันนี้เรามาดูกันว่า คำสั่งที่เรามักใช้งานกันบ่อยๆ นี้ อาจจะไม่ค่อยเหมาะที่จะใช้เท่าไรนัก แต่จะมีเหตุผลอะไรบ้าง เราไปดูกันเลยครับ
Rating :

Update : 2019-03-18 13:57:30

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

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

C# มา โหลด โน่น โหลดนี่กันเถอะ (โปรแกรมดาวน์โหลดด้วย C#)
ผมเองเป็นคนชอบโหลบ ทั้ง หนัง เพลง การ์ตูนต่างๆ ดังนั้น ผมจึงมักที่จะเขียนโค้ดสำหรับไว้โหลด โน่น โหลดนี่เสมอ โดยใช้หลักการของ System.Text.RegularExpressions
Rating :

Update : 2019-05-16 20:29:51

มาใช้ Notepad++ ทำการ Compare ไฟล์ระหว่างไฟล์ 2 ไฟล์ว่ามีตรงไหนบ้างที่แตกต่างกัน
วิธีใช้ Notepad++ กับปลั๊กอินที่ใช้สำหรับทำการ Compare ไฟล์ระหว่างไฟล์ 2 ไฟล์ว่ามีตรงไหนบ้างที่แตกต่างกัน จำเป็นอย่างยิ่งในการเขียนโปรแกรม
Rating :

Update : 2019-07-18 15:09:35

สอน 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
	ปรับแต่งเว็บให้โหลดเร็ว