PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


วนลูปแสดงข้อมูลจาก array ของตัวแปร object ด้วย jquery อย่างง่าย

02 August 2017 By
loop display jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ loop display jquery



เนื้อหานี้จะเป็นแนวทางการใช้งาน jquery ในการนำข้อมูลมาแสดงในรูปแบบลูปข้อมูล
เช่น นำข้อมูลที่ได้จากการเรียกใช้ API ซึ่งมีรูปแบบเป็น json string object มาใช้งาน
วนลูปแสดงในตารางเป็นต้น
 
ตัวอย่างเช่น ข้อมูลที่ได้จากใช้งาน ajax ด้วย jQuery getJSON() ตามบทความต่อไปนี้
 
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() 
http://www.ninenik.com/content.php?arti_id=373 via @ninenik
 
แต่ในที่นี้เราจะสมมติข้อมูลอย่างง่าย ด้วยชุดข้อมูลต่อไปนี้
 
// array ของ object ข้อมูลตัวอย่าง
var data = [
	{id:1,name:'Linda',age:27},
	{id:2,name:'Manop',age:32},
	{id:3,name:'Jubjang',age:24},
	{id:4,name:'Adam',age:25},
	{id:5,name:'June',age:21}
];
 
โดยเราต้องการข้อมูลข้างต้นมาแสดงในตารางในรูปแบบดังรูปด้านล่างนี้

 

 
 
วิธีการ เริ่มต้น ให้เราวางรูปแบบการแสดงผลข้อมูลที่ต้องการของตารางขึ้นมาก่อน ซึ่งก็จะประกอบไปด้วย
คอลัมน์ข้อมูลที่ต้องการและสอดคล้องกับข้อมูลที่จะแสดง และก็ส่วนของแถวของลูปข้อมูล โดยให้เราสร้างมา
แค่แถวเดียว รูปแบบก็จะเป็นดังรูปด้านล่าง (ในตัวอย่างเราใช้ร่วมกับ bootstrap css )

 

 
 

โค้ด HTML ตามรูปด้านบน

<table class="table table-bordered table-striped">
    <tr>
        <td>#</td>
        <td>ID</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr class="list-data">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
 
โดย tr ของแถวที่เราจะทำเป็นลูป ให้เรากำหนด css class เข้าไป เพื่อใช้อ้างอิงการใช้งาน ในที่นี้
เราใช้ชื่อเป็น list-data  และเนื่องจากตัวอย่างการแสดงข้อมูลของเรา ยังไม่ได้ซับซ้อนอะไร เป็นการ
แทรกข้อมูลเข้าไปใน td ตามลำดับ โดยการอ้างอิงลำดับคอลัมน์หรือ td ใน css หรือ javascript จะนับ
เริ่มต้นที่ 0,1,2,3.... ไปเรื่อย ดังนั้นคอลัมน์แรกจึงเริ่มต้นที่ 0
 
สำหรับตัวอย่างของเรา จะใช้การแสดงข้อมูลเมื่อผ่านมาแล้ว 3 วินาที  ตามโค้ดด้านล่างดังนี้
 

โค้ดตัวอย่าง ทั้งหมด จะเป็นดังนี้

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
 
 
<br>
<br>
<div class="container" style="width:600px;">
<br><br>
<table class="table table-bordered table-striped">
    <tr>
        <td>#</td>
        <td>ID</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr class="list-data">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
 

 
</div>
 
 
 
 
<script src="https://unpkg.com/jquery@3.2.1"></script>
 <script type="text/javascript">
$(function(){
	
	// array ของ object ข้อมูลตัวอย่าง
	var data = [
		{id:1,name:'Linda',age:27},
		{id:2,name:'Manop',age:32},
		{id:3,name:'Jubjang',age:24},
		{id:4,name:'Adam',age:25},
		{id:5,name:'June',age:21}
	];

	// กำหนดการหน่วงเวลาแสดงข้อมูลหลังผ่าน 3 วินาทีแล้ว
	setTimeout(function(){
		
		var loopTag = $(".list-data").clone(true); // clone แถวที่ทำการลูปไว้ในตัวแปร
		var newTag =""; // สร้างตัวแปรไว้เก็บ html tags ที่สร้างมาใหม่  
		$.each(data,function(i,k){ // วนลูปข้อมูล array ของ object
			var objHTML = loopTag; // ใช้ตัวแปร object ที่ clone มา
			objHTML.find("td:eq(0)").html(i+1).end()
			.find("td:eq(1)").html(data[i].id).end()
			.find("td:eq(2)").html(data[i].name).end()
			.find("td:eq(3)").html(data[i].age).end();
			newTag += $(objHTML)[0].outerHTML; // สร้าง tags ข้อมูลใหม่แต่ละแถว
		});
		$(".list-data").replaceWith(newTag); // แทนที่แถวที่จะทำการลูปด้วยข้อมูลใหม่
		
	},3000);

 });
 </script>
</body>
</html>
 
 
จะขออธิบายโค้ดเพิ่มเติม เริ่มต้น เราได้วางส่วนของ tr ที่มี class ชื่อ list-data ไว้ในตาราง table 
แล้วเราใช้คำสั่ง clone ใน jquery clone ในส่วนของ tr นั้น มาไว้ในตัวแปร loopTag ด้วยคำสั่ง
 
var loopTag = $(".list-data").clone(true);
 
ตัวแปร loopTag จะเป็น jquery object ที่มีเฉพาะ tag tr ที่เรา clone มา หรือก็คือส่วนของ tag
 
    <tr class="list-data">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
 
และเมื่อเราใช้คำสั่งลูปข้อมูลมาใช้งานด้วย $.each() เราเรียกใช้ ตัวแปร loopTag โดยเอาค่ามาเก็บไว้ในตัวแปร
objHTML ในแต่ละลูปข้อมูล 
 
$.each(data,function(i,k){ // วนลูปข้อมูล array ของ object
	var objHTML = loopTag; 
});
 
ตัวแปร i จะหมาย key ของ array ข้อมูลนั้นๆ จะเริ่มต้นที่ 0 ส่วน ตัวแปร k จะหมายถึง value ของแต่ละ ข้อมูล
อย่างเช่น ถ้า i เท่ากับ 0 ค่า k ก็จะเท่ากับ ค่าของชุอข้อมูล object  {id:1,name:'Linda',age:27} นั่นเอง
ดังนั้น data[i] จึงหมายถึงขุดข้อมูลในแต่ละแถว ตามค่า key ค่า i
การอ้างอิง object ชุดข้อมูล เช่น id ก็จะอ้างอิงผ่านตัวแปร data[i].id แบบนี้เป็นต้น
 
ต่อไปมาดูในส่วนของคำสั่ง
 
objHTML.find("td:eq(0)").html(i+1).end()
.find("td:eq(1)").html(data[i].id).end()
.find("td:eq(2)").html(data[i].name).end()
.find("td:eq(3)").html(data[i].age).end(); 
 
คำสั่งนี้หมายถึง jquery object ที่ชื่อ objHTML ที่เป็นค่าที่เรา clone มานั้น ให้ทำการหา find()
td:eq(0) ก็คือหาคอลัมน์แรก แล้วกำหนดค่าภายใน td ด้วยคำสั่ง html() ในที่นี้ คอลัมน์แรกของ
เราก็คือลำดับที่ของข้อมูล ก็จะเริ่มนับที่ 1,2,3.... ไปเรื่อยๆ ดังนั้นเราจึงใช้ค่า i ที่เป็น 0 บวกด้วย 1 
ดังนั้นเมื่อเข้าไปในแถวที่ 2 ค่า i ก็จเพิ่มเป็น 1 พอบวกอีก 1 ก็จเป็นข้อมูลลำดับที่สอง แบบนี้ไปเรื่อยๆ
สุดท้ายจบการทำงานด้วยคำสั่ง end() เพื่อให้เราสามารถเรียกใช้คำสั่ง find() ต่อเนื่องได้ โดยในบรรทดัต่อมา
 
.find("td:eq(1)").html(data[i].id).end()
 
คำสั่ง find() ก็จะหมายถึง objHTML ค้นหาต่อ เพราะยังไม่จบการทำงาน แต่บรรทัดนี้เป็นการค้นหา td:eq(1)
หรือก็คือคอลัมน์ที่ 2 จากนั้นก็แทรกค่าด้วย id ทำในลักษณะเช่นนี้ไปเรื่อย จนครบตามต้องการ อย่างในคอลัมน์สุดท้าย
เราทำการแทรกอายุ age และปิดด้วย ( ; ) semicolon เพื่อจบการทำงาน
 
ดังนั้นตัวแปร objHTML ในแต่ละแถว จะมี tag html เริ่มต้นเป็น
 
    <tr class="list-data">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
 
และหลังนำค่าข้อมูลมาแทนกด้วยคำสั่ง find() html() และ end() 
ค่าสุดท้ายหลังแทรกข้อมูลในแต่ละแถวก็จะมีข้อมูลเข้ามาด้วย อย่างแถวแรก ก็จะได้เป็น
 
    <tr class="list-data">
        <td>1</td>
        <td>1</td>
        <td>Linda</td>
        <td>27</td>
    </tr>
 
อย่างที่เราทราบกันแล้วว่าตัวแปร objHTML นั้นเป็น jquery object ซึ่งมี tag html อยู่ด้านใน
แต่ทีเราต้องการค่า tag html ด้านในของ jquery object ดังนั้นเราจึงทำการแปลงเป็น dom object
ด้วยคำสั่ง 
 
newTag += $(objHTML)[0].outerHTML; 
 
โดย $(objHTML)[0].outerHTML จะทำการแปลง jquery object เป็น dom object หรือ string tag html
ของแต่ละแถว เอามาต่อๆ กันไว้ในตัวแปร newTag ด้วยตัวจัดการ +=
 
เมื่อ newTag วนลูปเก็บรูปแบบ tag html ที่แทรกค่าครบหมดแล้ว ก็ออกนอกลูปข้อมูล
เราก็นำค่า newTag นี้ไปแทนที่ tr เดิมที่มี class ชื่อ list-data ด้วยคำสั่ง
 
$(".list-data").replaceWith(newTag);
 
ผลลัพธ์ที่ได้คือมีการแทรก tr class="list-data" วนลูปข้อมูลแสดงในตาราง ตามโครงสร้างดังรูป
 
 

 
 
 
ทีนี้เรามาดูกรณีสมมติว่า ข้อมูลการแสดงมีความซับซ้อนมากขึ้น เช่น เราอยากจัดรูปแบบของข้อมูล
ที่แสดงในแต่ละ td ตัวอย่าง อยากให้ id แสดงก่อนชื่อ ไม่ต้องแยก คอลัมน์ และมีแสดงตามต้องการ
ดังนี้

 

 
 

ตามรูปแบบโค้ด

<style type="text/css">
.my_red{color:red;}
.my_blue{color:blue;}
.my_green{color:green;}
</style>
<table class="table table-bordered table-striped">
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr class="list-data">
        <td>
        <span class="my_green"></span>
        </td>
        <td>
        <span class="my_red"></span>
        <span class="my_blue"></span>
        </td>
        <td>
        <span class="my_green"></span>
        </td>
    </tr>
</table>
 
จะเห็นว่าตอนนี้เราไม่สามารถอ้างอิงจาก td ได้แล้วเพราะ บางคอลัมน์มีการนำข้อมูลมาแสดงสองครั้ง
วิธีแก้ไขคือ เราสามารถใช้ css class ของ ส่วนข้อมูลในที่นี้คือ span มาใช้ได้ แต่เพื่อไม่ให้สับสน
ให้ใช้วิธีเพิ่ม css class ใหม่เข้าไป แล้ว อ้างอิงข้อมูลตามลำดับ key ที่เริ่มจาก 0 เหมือนที่ใช้ใน td 
เป็นดังนี้แทน สมมติเพิ่ม my_cssdata class เข้าไป
 
<style type="text/css">
.my_red{color:red;}
.my_blue{color:blue;}
.my_green{color:green;}
</style>
<table class="table table-bordered table-striped">
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr class="list-data">
        <td>
        <span class="my_cssdata my_green"></span>
        </td>
        <td>
        <span class="my_cssdata my_red"></span>
        <span class="my_cssdata my_blue"></span>
        </td>
        <td>
        <span class="my_cssdata my_green"></span>
        </td>
    </tr>
</table>
 
หมายเหตุ: css class ใช้รวมกันมากกว่าหนึ่งให้เว้นวรรคค่าแต่ละตัว
 
จากนั้นในส่วนของ javascript เราก็สามารถกำหนดเป็นดังนี้ได้
 
objHTML.find(".my_cssdata:eq(0)").html(i+1).end()
.find(".my_cssdata:eq(1)").html(data[i].id).end()
.find(".my_cssdata:eq(2)").html(data[i].name).end()
.find(".my_cssdata:eq(3)").html(data[i].age).end();
 

ผลลัพธที่ได้ ก็จะเป็นดังนี้

 

 
 
 
ต่อไป สมมติกรณีว่ามีการใช้งาน form element ในลูปข้อมูล เราจะกำหนดค่ายังไง ยกตัวอย่างเช่น
ให้แสดงอายุใน input type text หรือ number ดังนี้
 
 

 
 

ตามรูปแบบโค้ด

<style type="text/css">
.my_red{color:red;}
.my_blue{color:blue;}
.my_green{color:green;}
.my_inputtext{width:50px;}
</style>
<table class="table table-bordered table-striped">
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr class="list-data">
        <td>
        <span class="my_cssdata my_green"></span>
        </td>
        <td>
        <span class="my_cssdata my_red"></span>
        <span class="my_cssdata my_blue"></span>
        </td>
        <td>
        <input type="text" class="my_inputtext" name="age[]" value="" />
        </td>
    </tr>
</table>
 
วิธีการก็คล้ายกับตัวอย่างกรณีก่อนหน้า คือให้เราเพิ่ม css class เข้าไปใน input text ก็จะได้เป็น
 
<style type="text/css">
.my_red{color:red;}
.my_blue{color:blue;}
.my_green{color:green;}
.my_inputtext{width:50px;}
</style>
<table class="table table-bordered table-striped">
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr class="list-data">
        <td>
        <span class="my_cssdata my_green"></span>
        </td>
        <td>
        <span class="my_cssdata my_red"></span>
        <span class="my_cssdata my_blue"></span>
        </td>
        <td>
        <input type="text" class="my_cssdata my_inputtext" name="age[]" value="" />
        </td>
    </tr>
</table>
 
จากนั้นส่วนของ javascript ก็ปรับนิดหน่อยดังนี้
 
objHTML.find(".my_cssdata:eq(0)").html(i+1).end()
.find(".my_cssdata:eq(1)").html(data[i].id).end()
.find(".my_cssdata:eq(2)").html(data[i].name).end()
.find(".my_cssdata:eq(3)").attr("value",data[i].age).end();
 
จะเห็นว่า css class ที่ชื่อ my_cssdata ตัวสุดท้ายอ้างอิง key ที่เท่ากับ 3 จะเป็น input text
การกำหนดค่า เราจะใช้วิธีกำหนด attribute ให้กับ input text นั้น ในที่นี้คือกำหนด value ให้เท่ากับ
age 
 
หมายเหตุ: เราไม่สามารถใช้คำสั่ง val() เพื่อกำหนดค่าให้กับตัวแปร objHTML เหมือนการอ้างอิงปกติได้
กล่าวคือ เราไม่สามารถกำหนดค่าโดยใช้คำสั่ง 
 
.find(".my_cssdata:eq(3)").val(data[i].age).end(); // ไม่สามารถกำหนดในรูปแบบนี้ได้
 

มาดูผลลัพธ์ที่ได้ จะได้เป็นดังนี้

 

 
 
 
เราสามารถนำแนวทางนี้ไปประยุกต์ใช้งาน ในการวนลูปแสดงข้อมูลเพิ่มเติมได้ อย่างไรก็ตาม
รูปแบบวิธีข้างต้น เหมาะสำหรับรายการข้อมูลที่มีจำนวนไม่มากนัก หรือข้อมูลที่ไม่ได้มีหลายๆ หน้า

 




อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: jquery loop display






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง