อาจไม่รองรับสำหรับบางบราวเซอร์ โดยในตัวอย่างจะแทรกเรื่องเกี่ยวกับการใช้งาน การเลื่อน scroll
กับการแสดงข้อมูลตามเงื่อนไข
หมายเหตุ: การใช้งานขึ้นกับรูปแบบที่ต้องการ โค้ดต่อไปนี้เป็นแนวทาง การจัดรูปแบบการแสดง
ต้องปรับให้เหมาะสมตามแต่งานนั้นๆ จากตัวอย่างค่า td แต่ละส่วนกำหนดค่าความกว้างลงไปด้วย style
width
ตัวอย่าง
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Mark | Otto | @mdo |
| 3 | Mark | Otto | @mdo |
| 4 | Mark | Otto | @mdo |
| 5 | Mark | Otto | @mdo |
| 6 | Mark | Otto | @mdo |
| 7 | Mark | Otto | @mdo |
| 8 | Mark | Otto | @mdo |
| 9 | Mark | Otto | @mdo |
| 10 | Mark | Otto | @mdo |
| 11 | Mark | Otto | @mdo |
| 12 | Mark | Otto | @mdo |
| 13 | Mark | Otto | @mdo |
| 14 | Mark | Otto | @mdo |
| 15 | Mark | Otto | @mdo |
| 16 | Mark | Otto | @mdo |
| 17 | Mark | Otto | @mdo |
| 18 | Mark | Otto | @mdo |
| 19 | Mark | Otto | @mdo |
| 21 | Larry | the Bird | |
| 22 | Larry | the Bird | |
| 23 | Larry | the Bird | |
| 24 | Larry | the Bird | |
| 25 | Larry | the Bird | |
| 26 | Larry | the Bird | |
| 27 | Larry | the Bird | |
| 28 | Larry | the Bird | |
| 29 | Larry | the Bird | |
| 30 | Larry | the Bird | |
| 31 | Larry | the Bird | |
| 32 | Larry | the Bird | |
| 33 | Larry | the Bird | |
| 34 | Larry | the Bird | |
| 35 | Larry | the Bird | |
| 36 | Larry | the Bird | |
| 37 | Larry | the Bird | |
| 38 | Larry | the Bird | |
| 39 | Larry | the Bird | |
| 40 | Larry | the Bird | |
| 41 | Larry | the Bird | |
| 42 | Larry | the Bird | |
| 43 | Larry | the Bird | |
| 44 | Larry | the Bird | |
| 45 | Larry | the Bird | |
| 46 | Larry | the Bird | |
| 47 | Larry | the Bird | |
| 48 | Larry | the Bird | |
| 49 | Larry | the Bird | |
| 50 | Larry | the Bird | |
| 51 | Jacob | Thornton | @fat |
| 52 | Jacob | Thornton | @fat |
| 53 | Jacob | Thornton | @fat |
| 54 | Jacob | Thornton | @fat |
| 55 | Jacob | Thornton | @fat |
| 56 | Jacob | Thornton | @fat |
| 57 | Jacob | Thornton | @fat |
| 58 | Jacob | Thornton | @fat |
| 59 | Jacob | Thornton | @fat |
| 60 | Jacob | Thornton | @fat |
| 61 | Jacob | Thornton | @fat |
| 62 | Jacob | Thornton | @fat |
| 63 | Jacob | Thornton | @fat |
| 64 | Jacob | Thornton | @fat |
| 65 | Jacob | Thornton | @fat |
| 66 | Jacob | Thornton | @fat |
| 67 | Jacob | Thornton | @fat |
| 68 | Jacob | Thornton | @fat |
| 69 | Jacob | Thornton | @fat |
| 70 | Jacob | Thornton | @fat |
| 71 | Jacob | Thornton | @fat |
| 72 | Jacob | Thornton | @fat |
| 73 | Jacob | Thornton | @fat |
| 74 | Jacob | Thornton | @fat |
| 75 | Jacob | Thornton | @fat |
| 76 | Jacob | Thornton | @fat |
| 77 | Jacob | Thornton | @fat |
| 78 | Jacob | Thornton | @fat |
| 79 | Jacob | Thornton | @fat |
| 80 | Jacob | Thornton | @fat |
โค้ดตัวอย่างทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<br><br>
<div class="container-fluid" style="margin:auto;width:65%;position:relative;height:300px;">
<table class="table table-striped" style="width:500px;position:relative;">
<thead>
<tr class="bg-warning">
<td colspan="4" class="text-center" id="place_show">
</td>
</tr>
<tr class="bg-warning" style="display: table;width:100%;">
<td style="width:50px;">#</td>
<td style="width:150px;">First Name</td>
<td style="width:150px;">Last Name</td>
<td style="width:150px;">Username</td>
</tr>
</thead>
<!-- ค่า top 114px คือค่าที่ต้องการยับจากด้านบนออกจากส่วนของ thead-->
<tbody id="place_data" style="
position: absolute;
width: 500px;
display: table-column-group;
height: 200px;
overflow: auto;
">
<?php for($i=1;$i<20;$i++){?>
<tr style="display: table;width:100%;">
<td style="width:50px;"><?=$i?></td>
<td style="width:150px;">Mark </td>
<td style="width:150px;">Otto</td>
<td style="width:150px;">@mdo</td>
</tr>
<?php } ?>
<?php for($i=21;$i<51;$i++){?>
<tr style="display: table;width:100%;">
<td style="width:50px;"><?=$i?></td>
<td style="width:150px;">Larry </td>
<td style="width:150px;">the Bird</td>
<td style="width:150px;">@twitter</td>
</tr>
<?php } ?>
<?php for($i=51;$i<81;$i++){?>
<tr style="display: table;width:100%;">
<td style="width:50px;"><?=$i?></td>
<td style="width:150px;">Jacob</td>
<td style="width:150px;">Thornton</td>
<td style="width:150px;">@fat</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<br style="clear:both;">
<br style="clear:both;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var objTR = $("#place_data").find("tr"); // อ้างอิง tr ใน tbody
// เก็บตัวแปรค่าของข้อมูลของแถวแรก ในตารางส่วนขงอ tbody คอลัมน์ที่ 2 (ค่าในโปรแกรมเป็น 1)
var dataTopic = objTR.eq(0).find("td:eq(1)").text();
$("#place_show").html("Name: "+dataTopic); // แสดงค่าเริ่มต้น
// เมื่อ tbody มีการเลื่อน
$("#place_data").scroll(function () {
var pos_one=null; // ไว้เก็บตัวแปรตำแหน่ง tr ที่จะใช้งาน
// วน tr ใน tbody
objTR.each(function(i,v){
var pos_val = objTR.eq(i).offset(); // เก็บค่าตำแหน่ง tr
if(pos_val.top>=$("#place_data").offset().top){
pos_one=i; // เก็บค่า index ของ tr
return false; // ยกเลิกการวนลูป
}
});
// เก็บค่าข้อมูลใน tr จากตำแหน่งที่ได้จากค่า pos_one โดยใช้ค่าในคอลัมน์ 2 (ในโค้ด 1)
var dataTopic = objTR.eq(pos_one).find("td:eq(1)").text();
$("#place_show").html("Name: "+dataTopic); // แสดงค่าข้อมูล
});
});
</script>
</body>
</html>
