การ fixed header ของตาราง และข้อมูลตาม ตำแหน่ง scroll

24 July 2015 เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee

jquery fxed header scroll

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

ดูแล้ว 15,465 ครั้ง

ตัวอย่างและโค้ดต่อไปนี้เป็นการประขุกต์ใช้งาน css ในการจัดรูปแบบในส่วนของ header ของตาราง
อาจไม่รองรับสำหรับบางบราวเซอร์ โดยในตัวอย่างจะแทรกเรื่องเกี่ยวกับการใช้งาน การเลื่อน scroll
กับการแสดงข้อมูลตามเงื่อนไข

หมายเหตุ: การใช้งานขึ้นกับรูปแบบที่ต้องการ โค้ดต่อไปนี้เป็นแนวทาง การจัดรูปแบบการแสดง
ต้องปรับให้เหมาะสมตามแต่งานนั้นๆ จากตัวอย่างค่า td แต่ละส่วนกำหนดค่าความกว้างลงไปด้วย style
width

ตัวอย่าง

Name: Mark
#	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	@twitter
22	Larry	the Bird	@twitter
23	Larry	the Bird	@twitter
24	Larry	the Bird	@twitter
25	Larry	the Bird	@twitter
26	Larry	the Bird	@twitter
27	Larry	the Bird	@twitter
28	Larry	the Bird	@twitter
29	Larry	the Bird	@twitter
30	Larry	the Bird	@twitter
31	Larry	the Bird	@twitter
32	Larry	the Bird	@twitter
33	Larry	the Bird	@twitter
34	Larry	the Bird	@twitter
35	Larry	the Bird	@twitter
36	Larry	the Bird	@twitter
37	Larry	the Bird	@twitter
38	Larry	the Bird	@twitter
39	Larry	the Bird	@twitter
40	Larry	the Bird	@twitter
41	Larry	the Bird	@twitter
42	Larry	the Bird	@twitter
43	Larry	the Bird	@twitter
44	Larry	the Bird	@twitter
45	Larry	the Bird	@twitter
46	Larry	the Bird	@twitter
47	Larry	the Bird	@twitter
48	Larry	the Bird	@twitter
49	Larry	the Bird	@twitter
50	Larry	the Bird	@twitter
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>