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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
scroll fxed header jquery

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

ดูแล้ว 14,906 ครั้ง


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




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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ