jquery实战(一)——jquery实现table列表底部数据滚动

最新推荐文章于 2023-07-13 11:15:18 发布
最新推荐文章于 2023-07-13 11:15:18 发布
阅读量845 收藏
点赞数
分类专栏： JQuery 文章标签： jquery table滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Garnett_zk/article/details/111039606
版权

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 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.总结

到此就实现了相关的目的。

总结

本文到此结束，希望广大网友多多点评，指点。

山中水蓝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery table scroll表格插件内容部分加滚动条
11-11
jQuery table scroll表格插件内容部分加滚动条
bootstrap table组件实现点击行 在行下面展示数据列表
做你的时光机的博客
04-02 6913
工作遇到这个样一个需求类似于下面，当我点击2这一行的加号时，在当前行之后添加详细数据列表 但是 这个数据我个人当时考虑的时候首先考虑做成tree 但是奈何个人技术不行 用不了bootstrap table的树组件，无法定义这个数据的PID以及CID，这里的子列表是子ID中是否包含父ID来查找的，所以当时就没有用tree来解决 后来找到bootstrap table 的官网...
jquery table数据自动滚动
hzm博客
06-26 1061
jquery table数据自动滚动
【JQuery】table 表格自动滚动的两种效果
新青年1号
09-09 2909
动态效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta h...
table表格根据id查询数据下拉展示明细，两种方式
liuy_1314的博客
05-28 1257
<el-table-column width="40"> <template slot-scope="scope"> <el-button type="text" @click="hangClick(scope.row)"> <i class="el-icon-arrow-right"></i> </el-button> ...
jQuery实现当拉动滚动条到底部加载数据的方法分析
10-17
主要介绍了jQuery实现当拉动滚动条到底部加载数据的方法,结合实例形式分析了jQuery针对滚动事件的监听、响应及数据加载相关操作技巧,需要的朋友可以参考下
jQuery实现判断滚动条滚动到document底部的方法分析
10-16
在网页开发中，有时我们需要监听用户的...通过以上介绍，我们了解了如何使用jQuery来判断滚动条是否滚动到document底部，以及实现这一功能所需的关键概念和技术。这在动态加载内容的网页设计中是非常实用的一个技巧。
jQuery实现判断滚动条到底部
12-10
这里我们讨论的是如何使用jQuery来判断滚动条是否已经到达页面底部。jQuery提供了一个简洁的方式来处理这种需求，主要涉及到DOM元素的几个关键属性：scrollTop、clientHeight和scrollHeight。 首先，我们来看一下这...
用jQuery实现列表项滚动的效果
08-28
总的来说，jQuery提供了一种便捷的方式来实现列表项滚动效果，通过理解基本的DOM操作和动画原理，开发者可以轻松地创建出各种动态且吸引人的用户界面。在实践中，不断学习和探索，将使你更好地掌握jQuery和前端开发...
table展示数据，数据分页查询，底部导航生成
lemon
09-01 913
XML Code  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
【JavaScript源代码】jQuery实现表格行数据滚动效果.docx
12-30
jQuery实现表格行数据滚动效果 　　本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码，供大家参考，具体内容如下　　HTML代码：　　<div class="box">　　  <div class="box-header">　　    <div class="col">测试1</div>　　    <div class="col">测试2</div>　　    <div class="col">测试3</div>　　    <div class="col">测试4</div>　　  </div>　　  <div id="font-scroll">　　    <div clas
html 下拉菜单数据从table中获取,Bootstrap Table 在指定列中添加下拉框控件并获取所选值...
weixin_30171859的博客
06-04 540
背景最近在使用Bootstrap table ，有一个在某一列添加一个下拉列表，并且通过 “getAllSelections”方法获取所选行的需求，在实现这个功能的时，走了一些弯路，遇到了一些坑。所以今天总结出来，既是自己的学习，也分享给大家，希望能够有些帮助。如何解决添加这个下拉列表有以下两种方法：利用Column options 中的 formatter 将数据转换成下拉列表的形式使用boot...
element-ui表格多选，下方显示选中的数据
最新发布
weixin_52369334的博客
07-13 1098
表格多选时，下方需要显示选中的数据，下方取消选中的同时，表格也要随之取消选中
Bootstrap Table表格中存放下拉框，读取数据填充到下拉框
javadakangxiaobai的博客
09-04 2万+
初学Bootstarp，个人感觉一个功能非常强大的前端框架，由于学习的路途也不是一番风顺的，难免会遇到问题，将遇到的问题整理，可以时常看看，加深记忆。 最近做表格需要在表格中加入<select>标签，将数据填充到下拉框，无奈搞了好几个小时也没有成功，最后经过请教身边的大佬，得以解决。 代码如下: HTML页面代码 <!-- 查询条件 --&g...
表格点击当前行，在其下边展示其子信息列表（即下拉显示数据）
ailo555的专栏
07-28 4166
1、html代码:（主题列表信息）<td class="aw-url"><a href="javascript:;" onclick="getStockList('${theme.code}','${theme.name}')">${theme.name}</a></td>2、js代码：（获取该主题下的成分股列表）//获取成分股 function getStockList(id,name){
bootstrap table更新数据，根据查询条件和参数展示列表
热门推荐
linlinxie的博客
08-22 2万+
最近刚开始接触bootstrap table，感觉比较好用，初始化很方便。 html代码：<div class="panel panel-default"> <div class="panel-heading">搜索</div> <div class="panel-body"> <form role="form" id
html表格数据数据部分加滚动条,jQuery table scroll表格内容部分滚动条插件
weixin_31951239的博客
06-07 491
特效描述：表格内容 部分滚动条。jQuery table scroll表格内容部分滚动条插件代码结构1. 引入JS2. HTML代码*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.demo{width:500px;...
jQuery实现表格数据无限滚动
又偷懒了的博客
07-22 999
jQuery实现表格数据无限滚动
jq实现表格按行滚动
weixin_55510188的博客
12-10 1300
jq实现表格按行滚动 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格按行滚动</title> <style> .container { width: 80%; height: 120px; overflow: hidden; border: 1px solid #009688; }
jquery表格无缝滚动（轮播表格）
qq_41122834的博客
04-24 1948
HtmL <div style="height:320px;overflow:hidden"> <table id="tableId" class ='mytable1' style="table-layout:fixed; text-align: center;color:white; width: 100%;"> <thead> <tr > <th style="width:5%">序号</th>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值