qq_39133500 2021-04-06 10:36 采纳率: 0%
浏览 47

【JQUERY】table 多表格滚动 只有一个在自动滚 小白求救

<div class="container-content">	
	
	<div class="mid" >
		<div class="count-share w1" >
			<div class="com-count-title">岗位重点管控管理</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="height: 90%;width:100%;margin-top: 20px;padding:0">
				<table class="table" id="tableId" style="color: #ffffff;text-align: center;">
				<thead>
						<tr>
							<th>岗位名称</th>
							<th>产品名称</th>
							<th>规格型号</th>
							<th>日产量目标</th>
							<th>日直通率指标</th>
							<th>岗位关键控制点</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								==-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>=-=</td>
						</tr>
					</tbody>	
				</table>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-share w1" >
			<div class="com-count-title">产线人员能力矩阵表</div>
						<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="height: 90%;width:100%;margin-top: 20px;padding:0">
				<table class="table" id="tableId2" style="color: #ffffff;text-align: center;">
					<thead>
						<tr>
							<th>岗位名称</th>
							<th>操作人姓名</th>
							<th>独立操作</th>
							<th>监督操作</th>
							<th>学徒工</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								==-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
					</tbody>
				</table>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
	</div>
	
	<div class="bottom">
		<div class="count-share w1" >
			<div class="com-count-title">设备管理</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="height: 90%;width:100%;margin-top: 20px;padding:0">
				<table class="table" id="tableId3" style="color: #ffffff;text-align: center;">
					<thead>
						<tr>
							<th>设备名称</th>
							<th>数量</th>
							<th>保养数量</th>
							<th>开台数量</th>
							<th>故障停机时间</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								==-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
					</tbody>
				</table>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
		<div class="count-share w1" >
			<div class="com-count-title">统计管理</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="height: 90%;width:100%;margin-top: 20px;padding:0">
				<table class="table" id="tableId4" style="color: #ffffff;text-align: center;">
					<thead>
						<tr>
							<th>岗位名称</th>
							<th>操作人姓名</th>
							<th>产品名称</th>
							<th>规格型号</th>
							<th>生产数量</th>
							<th>直通数量</th>
							<th>返工数量</th>
							<th>返修数量</th>
							<th>报废数量</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								==-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>希望小学项目</td>
							<td>西门子交换机</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
						<tr>
							<td>私人订制</td>
							<td>AHOO1</td>
							<td>
								=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
							<td>西门子交换机</td>
							<td>
								<=-=
							</td>
							<td>2020/2/18</td>
							<td>=-=</td>
						</tr>
					</tbody>
				</table>
			</div>
			<span class="left-top"></span>
			<span class="right-top"></span>
			<span class="left-bottom"></span>
			<span class="right-bottom"></span>
		</div>
	</div>
	<div class="clearfix"></div>
</div>

这是表格

<script type="text/javascript"> 


// 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
	tableScroll('tableId', 100, 60, 4)
	tableScroll('tableId2', 100, 60, 4)
	tableScroll('tableId3', 100, 60, 4)
	tableScroll('tableId4', 100, 60, 4)
	var MyMarhq;
	function tableScroll(tableid, hei, speed, len) {
	   clearTimeout(MyMarhq);
	    $('#' + tableid).parent().find('.tableid_').remove()
	    $('#' + tableid).parent().prepend(
	        '<table class="tableid_" ><thead style="color:white;display:none">' + $('#' + tableid + ' thead').html() + '</thead></table>'
	    ).css({
	        'position': 'relative',
	        'overflow': 'hidden',
			'vertical-align':'center',
			'table-layout': 'fixed',
			'word-break': 'break-all',
			'text-align':'center'
	        // 'height': hei + 'px'
	    })
	    $(".tableid_").find('th').each(function(i) {
	        $(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
	    });
	    $(".tableid_").css({
	        'position': 'absolute',
	        'top': 0,
	        'left': 0,
	        'z-index': 1,
			'width': '100% ',
	    })
	    $('#' + tableid).css({
	        'position': 'absolute',
	        'top': 0,
	        'left': 0,
	        'z-index': 0,
	    })
		
	    if ($('#' + tableid).find('tbody tr').length > len) {
	        $('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
	        $(".tableid_").css('top', 0);
	        $('#' + tableid).css('top', 40);
	        var tblTop = 0;
	        var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
	
	        function Marqueehq() {
	            if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
	                tblTop = 0;
	            } else {
	                tblTop -= 1;
	            }
	            $('#' + tableid).css('margin-top', tblTop + 'px');
	            clearTimeout(MyMarhq);
	            MyMarhq = setTimeout(function() {
	                Marqueehq()
	            }, speed);
	        }
	
	        MyMarhq = setTimeout(Marqueehq, speed);
	         $('#' + tableid).find('tbody').click(function() {
	            clearTimeout(MyMarhq);
	        }, function() {
	            clearTimeout(MyMarhq);
	            if ($('#' + tableid).find('tbody tr').length > len) {
	                MyMarhq = setTimeout(Marqueehq, speed);
	            }
	        })
	    }
	}	
</script>

用了很多方法始终只有一个表格在自动滚 

  • 写回答

2条回答 默认 最新

  • CSDN专家-赖老师（软件之家） 2021-04-06 11:13
    关注

    现在都有很成熟的前端框架了，easyui,vue elementui,bootstrap,layui等自动就实现这些功能了。

    评论

报告相同问题？

悬赏问题

  • ¥15 使用C#，asp.net读取Excel文件并保存到Oracle数据库
  • ¥15 C# datagridview 单元格显示进度及值
  • ¥15 thinkphp6配合social login单点登录问题
  • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配