2. 程式人生 > 其它 >jquery實戰(一)——jquery實現table的滾動

jquery實戰(一)——jquery實現table的滾動

阿新 • • 發佈：2020-12-13

技術標籤：JQueryjquerytable滾動

系列文章目錄

提示：這裡可以新增系列文章的所有文章的目錄，目錄需要自己手動新增
例如：第一章 Python 機器學習入門之pandas的使用

jquery實現table的滾動

目的

因為業務的需要，我們希望實現實現table底部資料滾動，如下圖
在這裡插入圖片描述

實現方法

1.HTML程式碼

<!DOCTYPE html>
<html lang="zh-CN">
<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>資料視覺化大屏</title>
    <link rel="stylesheet" href="${ctxStatic}/visualdata/css/common.css"
 
>
    <link rel="stylesheet" href="${ctxStatic}/visualdata/css/data_text.css">
    

</head>
<body >

<!--header開始-->
<div class="header">
	<div class="header_logo fl">
        <a href="#"><img src="${ctxStatic}/visualdata/img/logo.png"
 
 ></a>
    </div>
    <div class="header_nav fl"  align="center">
        
            <div style="font-size:40px;">中鐵十一局</div>
			<div style="font-size:20px;">香山嶺隧道施工人員及車輛實時定位跟蹤系統</div>

    </div>
    <!-- <div class="header_myself fr">
        <div class="topTime">時間載入中...</div>
    </div> -->
</div>
<!--header結束-->

<!--content開始-->
<div class="data_content">

    <div class="data_info" align="center">
		<div class="wendu" >溫度：9℃</div>
		<div class="shidu">溼度：56%RH</div>
		<div class="shidu">風速：3級</div>
		<div class="shidu">風向：東北風</div>
		<div class="shidu">PM2.5：21</div>
    </div>

    <div class="data_main">

        <div class="main_center fl">
            <div class="center_text">
                <div class="main_title">
                    <img src="${ctxStatic}/visualdata/img/title_3.png" alt="">
                    隧道平面模擬圖
                </div>
                <iframe SRC="${ctx}/bbls/location/realTime"  style="width:100%;height:100%"></iframe> 
            </div>
            <!-- <iframe SRC="${ctx}/bbls/location/realTime" ></iframe>  -->
        </div>
    
    </div>
    <div class="data_bottom">
        <div class="bottom_1 fl">
            <div class="main_title">
                <img src="${ctxStatic}/visualdata/img/title_2.png" alt="">
                    隧道工程車輛統計
            </div>
            <div class="main_table">
                <table class="carTable">
                    <thead>
                    <tr>
                        <th >車輛編號</th>
                        <th>車輛型別</th>
                        <th>駕駛人</th>
                        <th>位置</th>
                        <th>狀態</th>
                    </tr>
                    </thead>
                    <tbody id="car">
                    
                    </tbody>
                </table>
            </div>
        </div>
       
        <div class="bottom_4 fr">
            <div class="main_title">
                <img src="${ctxStatic}/visualdata/img/title_2.png" alt="">
                    隧道作業人員統計
            </div>
            <div class="main_table">
                <table class="workerTable">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>工種類別</th>
                        <th>位置</th>
                        <th>狀態</th>
                    </tr>
                    </thead>
                    <tbody id="worker">
 
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>



<!--content結束-->

<script src="${ctxStatic}/visualdata/js/jquery-2.2.1.min.js"></script>

</body>

<script src="${ctxStatic}/visualdata/js/common.js"></script>

</html>

2.JS程式碼

$(function () {
    getCurrentCar();
    getCurrentWorker();
})
setInterval(currrentWorker, 30000); 
function currrentWorker(){
	console.log(11);
	getCurrentCar();
    getCurrentWorker();
}
var carList;
var workerList;

	 //查詢車輛
	 var getCurrentCar = function(){
		   var URL = "${ctx}/../findCurrentCar"
		   $.ajax({
				type : "get",
				url : URL,
				dataType : "json",
				success : function(data) {
					if(data.list.length > 0){
						$("#car").html("");
						carList = data.list;
						for (var i = 0; i < carList.length; i++) {
							if(i<=4){
								var temp = "";
								if(carList[i].isSos==0){
									temp="正常";
								}else{
									temp="求救";
								}
								if(temp=="求救"){
									$("#car").append('<tr class="bb"><td>'+carList[i].carCode+'</td><td>'+carList[i].dictName+'</td><td>'+carList[i].people+'</td><td>'+carList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
								}else{
									$("#car").append('<tr><td>'+carList[i].carCode+'</td><td>'+carList[i].dictName+'</td><td>'+carList[i].people+'</td><td>'+carList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
								}
								
							}
						}
					}
				},
				error : function(data) {

				}
			});
	 }
	 
	 //查詢工人
	 var getCurrentWorker = function(){

		   var URL = "${ctx}/../findCurrentWorker"
		   $.ajax({
				type : "get",
				url : URL,
				dataType : "json",
				success : function(data) {
					var workerData = data;
					if(data.list.length > 0){
						 workerList = data.list;
						$("#worker").html("");
						for (var i = 0; i < workerList.length; i++) {
							if(i<=4){
								var temp = "";
								if(workerList[i].isSos==0){
									temp="正常";
								}else{
									temp="求救";
								}
								if(temp=="求救"){
									$("#worker").append('<tr class="bb"><td>'+workerList[i].name+'</td><td>'+workerList[i].dictName+'</td><td>'+workerList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
								}else{
									$("#worker").append('<tr><td>'+workerList[i].name+'</td><td>'+workerList[i].dictName+'</td><td>'+workerList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
								}
								
							}else{
								break;
							}
						}
					}
					
				},
				error : function(data) {

				}
			});
	 }

//表格滾動
	 function tableScroll(){
		 if(carList != undefined){
			 var car = carList[0];
			 if(carList.length >1){
					carList.splice(0,1);
					carList.push(car);
				}
			 $("#car").html("");
				for (var i = 0; i < carList.length; i++) {
					if(i<=4){
						var temp = "";
						if(carList[i].isSos==0){
							temp="正常";
						}else{
							temp="求救";
						}
						if(temp=="求救"){
							$("#car").append('<tr class="bb"><td>'+carList[i].carCode+'</td><td>'+carList[i].dictName+'</td><td>'+carList[i].people+'</td><td>'+carList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
						}else{
							$("#car").append('<tr><td>'+carList[i].carCode+'</td><td>'+carList[i].dictName+'</td><td>'+carList[i].people+'</td><td>'+carList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
						}
						
					}else{
						break;
					}
				}
	
		 }
		 
		if(workerList != undefined){
				var worker = workerList[0];
				if(workerList.length >1){
					workerList.splice(0,1);
					workerList.push(worker);
				}
				$("#worker").html("");
				for (var i = 0; i < workerList.length; i++) {
					if(i<=4){
						var temp = "";
						if(workerList[i].isSos==0){
							temp="正常";
						}else{
							temp="求救";
						}
						if(temp=="求救"){
							$("#worker").append('<tr class="bb"><td>'+workerList[i].name+'</td><td>'+workerList[i].dictName+'</td><td>'+workerList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
						}else{
							$("#worker").append('<tr><td>'+workerList[i].name+'</td><td>'+workerList[i].dictName+'</td><td>'+workerList[i].realLocation+'米'+'</td><td>'+temp+'</td></tr>');
						}
						
					}else{
						break;
					}
				}
				
				
		}
		 
	 }
	 
	 setInterval(tableScroll, 1000);

3.總結

到此就實現了相關的目的。

總結

本文到此結束，希望廣大網友多多點評，指點。

相關推薦

jquery實戰(一)——jquery實現table的滾動

技術標籤：JQueryjquerytable滾動 系列文章目錄 提示：這裡可以新增系列文章的所有文章的目錄，目錄需要自己手動新增 例如：第一章 Python 機器學習入門之pandas的使用

jQuery實現一組圖片迴圈滾動

本文例項為大家分享了實現一組圖片迴圈http://www.cppcns.com滾動的具體程式碼，供大家參考，具體內容如下

仿天貓官網主頁側邊欄導航效果（jQuery實現樓層滾動效果）

效果圖： html程式碼： <div id=\"loutinav\"> <ul> <li style=\"background: red;line-height: 35px;\"><span>導航</span> </li>

JavaScript實現樓梯滾動特效(jQuery實現)

想必大家都用過JD，在它的首頁裡面有個很常見的特性：就是 樓梯特效 。 對於程式設計師的我們，可以說是萬物皆可盤。那麼，我們就來盤一下它。

jQuery實現Table分頁效果

本文例項為大家分享了實現Table分頁效果的具體程式碼，供大家參考，具體內容如下

JQuery省市聯動效果實現過程詳解

Js相關技術 JS中的陣列: [\"城市\"] new Array() DOM樹操作: ​ 建立節點: document.createElement

Jquery使用each函式實現遍歷及陣列處理

each()方法能使DOM迴圈結構簡潔，不容易出錯。each()函式封裝了十分強大的遍歷功能，使用也很方便，它可以遍歷一維陣列、多維陣列、DOM,JSON 等等

JQuery的turn.js實現翻書效果

純CSS實現table固定thead,tbody進行滾動.html

emmm。公司業務需求。所以自己寫了一個表格固定,不過，網上也看到了另一種方法。都放出來。學習使用。

jQuery-App輸入框實現實時搜尋

本文例項為大家分享了jQuery-App輸入框實現實時搜尋的具體程式碼，供大家參考，具體內容如下

JQuery學習(一)

內容概覽 JQuery的初步認識 JQuery的選擇器 JQuery的過濾器 一、JQuery的初步認識 1.1 JQuery概念

對比jQuery和Vue.js實現導航板塊方法的區別

網頁中經常會有類似這種的版塊： 它的功能需求是： 上方一行導航，下方的內容會根據上方導航變化。

jquery 輪播圖實現（手動輪播+自動輪播）

技術標籤：Jquery前端jquery輪播圖 html <div class="top"> <ul id="imgList">

jQuery Ajax 簡單的實現跨域請求

技術標籤：前端php html 程式碼清單： <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script>

jQuery(一)——jQuery事件操作

技術標籤：JavaWebjsjavascriptjqueryvuecss 1. 頁面載入完成之後事件：Dom和jQuery對比 $( function(){ } ); 和 window.onload = function(){} 的區別？

element多個table實現同步滾動的示例程式碼

element ui 實現多個table同時滾動，橫向縱向滾動 程式碼如下： <script src=\"//unpkg.com//dist/vue.\"></script>

基於jquery的countdown外掛實現毫秒倒計時

原版的jQuery元件只支援到秒級，現做了改動，已經支援到毫秒級，改完以後的js程式碼如下

通過jQuery傳送ajax請求實現from表單提交上傳

HTML程式碼如下{{--jQueryAjax提交 laravel框架簡單測試--}} <!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\"content=\"width=device-width,

實現 Table 的行交替顏色、選中行變色的一種方法。演示+原始碼

借用了一下園子裡的新聞的標題 :) 使用css和js實現。 新聞標題 新增時間 人氣 iPhone 3G拆解圖

vue table表格實現無縫滾動 滑鼠進入可懸停

<el-table ref=\"table\" :data=\"tableData\" :header-cell-style=\"{background: \'#F0F2F7\', color: \'#606266\'}\"