table表头行不动

论坛 › 期权论坛 › 脚本     
匿名技术用户   2020-12-27 16:40   42   0

今天遇到一个问题怎么使表头行不动

如图：

仔细思考之后发现没有此类的参考怎么办呢？

解决方案是使用俩个table：1.一个table是表头，一个table是下面的

具体代码如下：

//html代码：

</div>
<div id="createtable1" style="position:relative;position:absolute; top:20%; left:20px; width: 98%; height: auto;">
</div>
<div id="createtable" style="position:relative;position:absolute; top:28%; left:20px; width: 99%; height: 100%;">
</div>

具体js代码：因为我的table是动态生成的

function CreateTable(Count) {

//动态生成table
var table1 = $("<table id='bodytable' width='99%' heigth='30%' border='1px'>");
table1.appendTo($("#createtable1"));//table放入div中

var tr = $("<tr style='color:#03D5DD;font-weight: bold;height:10%;_position:absolute;font-size:14px'></tr>");//动态创建tr
tr.appendTo(table1);//tr加入table
var th = $("<th width='10%' style='BORDER-RIGHT: #f6f6f6 0px solid; text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px;' height='20px'>"
+ '门店名称' + "</th>");//动态生成td
th.appendTo(tr);//td加入tr
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px' >" + '状态'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + 'pc'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + '网络'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + '天线'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + 'REDER'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>" + '播放素材'
+ "</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>实时监控</th>");
th.appendTo(tr);
var th = $("<th width='10%' style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;text-align:center;vertical-align:middle;color:#03D5DD;font-weight: bold;font-size:15px'>查看详情</th>");
th.appendTo(tr);
var table = $("<table id='bodytable' width='99%' heigth='30%' border=\"1\">");
table.appendTo($("#createtable"));
--------------------------------------------------------------------------------------以上是表头，以下是表----------------------------------------------------------------------------------------
for (var i = 0; i < Count.length; i++) {

var tr = $("<tr style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%' id='"+Count[i].shopName+"'></tr>");
tr.appendTo(table);
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%' id='td"+Count[i].shopName+"'>" + Count[i].shopName
+ "</td>");
td.appendTo(tr);
if (Count[i].state == "1") {
document.getElementById("td"+Count[i].shopName+"").style.color = "red"
}
if (Count[i].state == "0") {
document.getElementById("td" + Count[i].shopName + "").style.color = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%' ><input type='button'disabled='true' id='state"+i+"' ></td>");
td.appendTo(tr);
if (Count[i].state == "1") {
document.getElementById("state" + i + "").value = "异常"
document.getElementById("state" + i + "").style.Color = "white"
document.getElementById("state" + i + "").style.backgroundColor = "red"
// document.getElementById("state"+i+"").parentNode.style.color="white"
}
if (Count[i].state == "0") {
document.getElementById("state" + i + "").value = "正常"
document.getElementById("state" + i + "").style.backgroundColor = "#0C9624"
}


var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button'disabled='true' id='pc"+i+"'></td>");
td.appendTo(tr);
if (Count[i].pc == "1" | Count[i].pc == null) {
document.getElementById("pc" + i + "").value = "异常"
document.getElementById("pc" + i + "").style.backgroundColor = "red"
}
if (Count[i].pc == "0") {
document.getElementById("pc" + i + "").value = "正常"
document.getElementById("pc" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' disabled='true' id='web"+i+"'></td>");
td.appendTo(tr);
if (Count[i].web == "1") {
document.getElementById("web" + i + "").value = "异常"
document.getElementById("web" + i + "").style.backgroundColor = "red"
}
if (Count[i].web == "0") {
document.getElementById("web" + i + "").value = "正常"
document.getElementById("web" + i + "").style.backgroundColor = "#0C9624"
}


var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button'disabled='true'id='antenna"+i+"'></td>");
td.appendTo(tr);
if (Count[i].antenna == "1" | Count[i].antenna == null) {
document.getElementById("antenna" + i + "").value = "异常"
document.getElementById("antenna" + i + "").style.backgroundColor = "red"
}
if (Count[i].antenna == "0") {
document.getElementById("antenna" + i + "").value = "正常"
document.getElementById("antenna" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' disabled='true' id='reader"+i+"'></td>");
td.appendTo(tr);
if (Count[i].reader == "1" | Count[i].reader == null) {
document.getElementById("reader" + i + "").value = "异常"
document.getElementById("reader" + i + "").style.backgroundColor = "red"
}
if (Count[i].reader == "0") {
document.getElementById("reader" + i + "").value = "正常"
document.getElementById("reader" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' disabled='true' id='broadcastMaterial"+i+"'></td>");
td.appendTo(tr);
if (Count[i].broadcastMaterial == "1"
| Count[i].broadcastMaterial == null) {
document.getElementById("broadcastMaterial" + i + "").value = "异常"
document.getElementById("broadcastMaterial" + i + "").style.backgroundColor = "red"
}
if (Count[i].broadcastMaterial == "0") {
document.getElementById("broadcastMaterial" + i + "").value = "正常"
document.getElementById("broadcastMaterial" + i + "").style.backgroundColor = "#0C9624"
}
var td = $("<td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;'><input type='button' id='realtimeSupervision" + i
+ "' οnclick='realtimeSupervision(this)'></td>");
td.appendTo(tr);
document.getElementById("realtimeSupervision" + i + "").value = "查看"
document.getElementById("realtimeSupervision" + i + "").style.backgroundColor = "#FEF430"
var td = $(" <td style='BORDER-LEFT: #f9f9f9 0px solid;BORDER-RIGHT: #f6f6f6 0px solid;' width='10%'><a href='#div3' ><input type='button' id='details" + i
+ "' οnclick='details(this)'></a></td>");
td.appendTo(tr);
document.getElementById("details" + i + "").value = "查看"
document.getElementById("details" + i + "").style.backgroundColor = "#FEF430"
}


}

样式：#createtable {
min-height: 250px;
overflow-y: auto;
max-height: 300px;
width: 100%
}

结果：


回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

16级独孤
匿名技术用户

积分:7942463
帖子:1588486
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP