jq动态加载，滚动表格

于 2021-11-10 10:50:24 发布
阅读量272 收藏
点赞数
文章标签： javascript html jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu_xu_0924/article/details/121243505
版权 
<div class="rent f-fl mr0" style="padding: 0px;">
						<div class="news-lst alarm-lst task-lst alarm-head">
							<ul style="overflow: hidden;">
								<li>
									<a href="javascript:void(0);" class="f-toe">
										<div class="item" style="width: 5%">
											<div class="f-toe">序号</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">房间名称</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">设备名称</div>
										</div>
										<div class="item" style="width: 5%">
											<div class="f-toe">告警等级</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">告警名称</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">告警含义</div>
										</div>
										<div class="item" style="width: 5%">
											<div class="f-toe">触发值</div>
										</div>
										<div class="item" style="width: 5%">
											<div class="f-toe">阔值</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">开始时间</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">结束时间</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">确认时间</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">确认描述</div>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="news-lst alarm-lst task-lst" id="alarmTbody" style="height: 100px;">
							<ul>
								<li>
									<a href="javascript:void(0);" class="f-toe">
										<div class="item" style="width: 5%">
											<div class="f-toe">1</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">宾阳机房</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">温湿度2</div>
										</div>
										<div class="item" style="width: 5%">
											<div class="f-toe">1</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">温度告警</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">温度低</div>
										</div>
										<div class="item" style="width: 5%">
											<div class="f-toe">10</div>
										</div>
										<div class="item" style="width: 5%">
											<div class="f-toe">20</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">2021-08-23 12:00:00</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">2021-08-23 12:00:00</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">2021-08-23 12:00:00</div>
										</div>
										<div class="item" style="width: 10%">
											<div class="f-toe">确定</div>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
//动态加载数据
$.ajax({
			type: "get",
			contentType: 'application/json',
			dataType: "json",
			url: "json/list.json",
			async: false,
			success: function(result) {
				$("#alarmTbody").empty();
				var data = result;
				if (data != undefined) {
					var row = "";
					for (var i = 0; i < data.length; i++) {
						row += '<li><a href="javascript:void(0);" class="f-toe">';
						row += '<div class="item" style="width: 5%"><div class="f-toe">'
						row += i + 1
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].roomname == undefined ? "-" : data[i].roomname;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].equipname == undefined ? "-" : data[i].equipname;
						row += '</div></div>'
						row += '<div class="item" style="width: 5%"><div class="f-toe">'
						row += data[i].eventlevel == undefined ? "-" : data[i].eventlevel;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].eventname == undefined ? "-" : data[i].eventname;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].meaning == undefined ? "-" : data[i].meaning;
						row += '</div></div>'
						row += '<div class="item" style="width: 5%"><div class="f-toe">'
						row += data[i].eventvalue == undefined ? "-" : data[i].eventvalue;
						row += '</div></div>'
						row += '<div class="item" style="width: 5%"><div class="f-toe">'
						row += data[i].endvalue == undefined ? "-" : data[i].endvalue;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].starttime == undefined ? "-" : data[i].starttime;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].endtime == undefined ? "-" : data[i].endtime;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].confirmtime == undefined ? "-" : data[i].confirmtime;
						row += '</div></div>'
						row += '<div class="item" style="width: 10%"><div class="f-toe">'
						row += data[i].confirmdescription == undefined ? "-" : data[i].confirmdescription;
						row += '</div></div>'
						row += '</a>'
						row += '</li>'
					}
					$("#alarmTbody").append('<ul>' + row + '</ul>');
				}
			}
		});


//滚动表格内容
		(function($) {
			$.fn.myScroll2 = function(options) {
				//默认配置
				var defaults = {
					speed: 40, //滚动速度,值越大速度越慢
					rowHeight: 24 //每行的高度
				};
				var opts = $.extend({}, defaults, options),
					intId = [];
				
				function marquee(obj, step) {
					obj.find("ul").animate({
						marginTop: '-=1'
					}, 0, function() {
						var s = Math.abs(parseInt($(this).css("margin-top")));
						if (s >= step) {
							$(this).find("li").slice(0, 1).appendTo($(this));
							$(this).css("margin-top", 0);
						}
					});
				}
				this.each(function(i) {
					var sh = opts["rowHeight"],
						speed = opts["speed"],
						_this = $(this);
					intId[i] = setInterval(function() {
						if (_this.find("ul").height() <= _this.height()) {
							clearInterval(intId[i]);
						} else {
							marquee(_this, sh);
						}
					}, speed);
					_this.hover(function() {
						clearInterval(intId[i]);
					}, function() {
						intId[i] = setInterval(function() {
							if (_this.find("ul").height() <= _this.height()) {
								clearInterval(intId[i]);
							} else {
								marquee(_this, sh);
							}
						}, speed);
					});
				});
			}
		})(jQuery);
		$(function() {
			$("#alarmTbody").myScroll2({
				speed: 40,
				rowHeight: 40
			});
		});

//json数据
[
	{
		"roomname":"武鸣机房",
		"equipname":"温湿度2",
		"eventlevel":1,
		"eventname":"温度告警",
		"meaning":"温度过低",
		"eventvalue":20,
		"endvalue":10,
		"starttime":"2021-096-01 12:00:00",
		"endtime":"2021-09-12 12:00:00",
		"confirmtime":"2021-10-06 12:00:00",
		"confirmdescription":"确定"
	},
	{
		"roomname":"武鸣机房",
		"equipname":"温湿度2",
		"eventlevel":1,
		"eventname":"温度告警",
		"meaning":"温度过低",
		"eventvalue":20,
		"endvalue":10,
		"starttime":"2021-096-01 12:00:00",
		"endtime":"2021-09-12 12:00:00",
		"confirmtime":"2021-10-06 12:00:00",
		"confirmdescription":"确定"
	},
	{
		"roomname":"武鸣机房",
		"equipname":"温湿度2",
		"eventlevel":1,
		"eventname":"温度告警",
		"meaning":"温度过低",
		"eventvalue":20,
		"endvalue":10,
		"starttime":"2021-096-01 12:00:00",
		"endtime":"2021-09-12 12:00:00",
		"confirmtime":"2021-10-06 12:00:00",
		"confirmdescription":"确定"
	}
]
//css样式
.rent{
    height: 100%;
    padding:20px 0 0 0;
    overflow: hidden;
    color: #d4eafc
}
.rent .news-lst li{
    width: 100%;
    padding-left: 0;
    height: 40px;
    line-height: 40px;
}
.rent .news-lst{
    overflow: hidden;
    height: 17vmin;
}
.rent .news-lst li a{
     color: #595959;
     font-size: 12px;
}
.news-lst .date {
    color: #595959;
    font-size: 12px;
}
.address .news-lst li a{
    width: 100%;
    cursor: text;
}

.alarm-lst .item{
    /* width: 22.5%; */
    float: left;
/*padding-right: 20px;*/
text-align:left;
}
.task-lst .item{
    /*width: 20%;*/

    text-align:center;
}
.task-lst .item img{
    margin-right: 10px;
    width: 16px;
}
.rent .alarm-head{
    height: auto;
}
.f-toe{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #d4eafc;
    font-size: 0.8rem;
}

注意：此方法有一个问题，就是若数据量没有超过一定的高度，表格内容不会滚动

追风筝的少女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery表格信息自动向上滚动代码
06-10
这是一款经过样式美化的jQuery表格信息自动向上滚动代码，鼠标悬停表格行高亮显示，并停止滚动。
动态加载jquery
jackyrongvip的专栏
10-15 155
如果要在js中动态加载jquery的话，可以这样： [code="java"] function checkJquery() { if(!(window.jQuery)) { var s = document.createElement('script'); s.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jqu...
Jq页面滚动加载
我的博客
12-03 403
Jq页面滚动加载jq共用部分几乎不用修改开始加载数组 jq共用部分几乎不用修改 <script> //options.load:方法，加载的过程 //options.marginBottom:数值，默为0，触发加载的内部块与外部块底部的距离 //options.stop:方法，停止滚动加载的条件，默认返回false，一直加载 ( function ( $ ) ...
jquery自动滚动表格
qq_38872934的博客
09-30 2542
想要做出日志表格自动滚动的样式，百度一下，发现大部分都是通过jQuery和定时器结合去实现的，记下来记下来~ 注意点 1.主要通过$obj.css()，改变top(结合position)或者margin-top属性，产生滚动效果。 2.滚动的操作对象主要是tr，因此thead的tr也有可能会受到影响，所以最好在html代码中设置2个table，1个放thead，1个放tbody，滚动操作第2个。 ...
js动态检测加载 JQ
EM宝宝的博客
07-04 687
var jqcdnurl = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.js'; //控制台输出 function log() { for (var index in arguments) { console.log(arguments[index]); } } //js加载 fun function loadjs()...
jquery给表格加滚动条
03-23
4. 使用jQuery：在文档加载完成后，通过jQuery选择表格并应用样式。 ```javascript $(document).ready(function() { $('#scrollingTable').css({ 'overflow-x': 'hidden', /* 隐藏水平滚动条 */ 'display': '...
jquery懒加载版本表格树GridTree.zip
04-12
懒加载是一种优化网页性能的技术，它只在用户滚动到可视区域时才加载图片或数据，而非一次性加载所有内容。在GridTree中，这一技术被巧妙地应用到表格树的构建上，显著减少了初始页面加载的时间，尤其在数据量庞大的...
jQuery table scroll表格插件内容部分加滚动条
11-11
需要注意的是，当表格数据动态加载或使用Ajax获取时，可能需要在数据加载完成后再次调用`tableScroll()`方法，以确保滚动条的正确显示。例如： ```javascript $.ajax({ url: 'your/data/source', success: ...
jq弹性表格控件
10-25
2. **动态加载**：当数据量过大时，tilesjs支持分页和懒加载机制，只在用户滚动到相应位置时加载更多的数据，提高了页面的加载速度和性能。 3. **响应式设计**：该控件具备良好的响应式布局，可以适应不同的屏幕...
JQ分页动态该模板
04-09
通过修改JavaScript代码，可以实现自定义的分页逻辑，如加载更多、无限滚动等。 总之，"JQ分页动态改模板"提供了一种使用jQuery实现分页功能的实例，通过这个模板，开发者可以快速地在自己的项目中集成分页功能，...
jQuery自动滚动表格高亮显示代码.zip
07-05
jQuery自动滚动表格高亮显示代码是一款带有行点击，奇数行样式添加，偶数行样式添加，json初始化表格等功能。
jquery 表格自动滚动 类似于新闻
07-07
jquery 表格自动滚动 类似于新闻
jQuery表格信息自动向上滚动代码.zip
01-11
jQuery表格自动向上滚动代码，鼠标悬浮停止，离开自动继续滚动 jQuery表格自动向上滚动代码，鼠标悬浮停止，离开自动继续滚动
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
11-24
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title> <script src="js/jquery-1.11.1.min.js" type
jquery 列表动态添加输入
07-04
对表单进行复制 同时可以根据输入内容添加后动态生成 HelperTable.Copy.run({ defaultData:data,//加载的数据 tableElement:"#rowContent",//列表容器 indexField:'id',//指定唯一标识 数据唯一标识字段 first:true,//是否从上添加 false表示在下面添加 rowModel:function(data){//单条数据模型 return WorkExp.rowIndexModel(data); }, del:function(context,parent,index,indexVal){//删除按钮动作 如果不设置此项则不显示删除按钮 返回为true则删除缓存hash 否则不删除 parent.remove(); console.log(index.indexVal); return true; } });
动态加载jQuery
weixin_30252709的博客
11-09 65
success: function(data){ for(var i in data){ $('.x-details>ul:eq(0)').append("<li>"+i+":"+data[i]+"</li>") } } ...
jquery 滚动加载更多列表带loading效果
qq_17108919的博客
07-17 495
移动端–滚动加载更多列表带loading效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="format-de
jq 表格内容滚动
weixin_45342387的博客
03-08 101
$(function () { var text = $("tbody:first");//定义第一个tr内容 var clear;//定义需要清除动画的部分 text.hover(function () { clearInterval(clear);//鼠标悬停，清除动画，停止滚动 }, function () { clear = setInterval(function () {
动态加载Jquery
douyunqian668的博客
03-21 806
function AjaxLoadJquerylibrary()           {               var d = document, s = d.getElementById('firebug-lite');               if (s != null)                   return;               s = d.creat
jq 滚动页面加载动画
最新发布
11-15
为了实现 jq 滚动页面加载动画，我们可以使用 jq 提供的 animate() 方法来控制页面元素的动画效果。具体来说，我们可以监听页面的滚动事件，并且在滚动到特定位置时触发相应的动画效果。 首先，我们可以使用 $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值