table表头行不动

前端html 同时被 3 个专栏收录
5 篇文章 0 订阅
4 篇文章 0 订阅
3 篇文章 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
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值