将CSS应用于在JavaScript中创建的表-表的位置不正确

Applying CSS to table created in JavaScript - Table not positioning in correct location

本文关键字：位置 不正确 创建 CSS 应用于 JavaScript      更新时间：2023-09-26

我的问题是在正确的位置创建了一个新的灰色框，但JS代码生成的表位于下方，滚动时也会出现在页脚上方。

我的CSS是：

#contractTable {
position: relative;
width: 90%;  
margin-left: auto;
margin-right: auto;
text-align: center;  
background-color: #C0C0C0;
border: 1px solid black;
padding-top: 200px;
top: 200px;
}

a） 如何访问css中的表？（由于上面的代码出现，创建了一个新的盒子…）

b） 如何阻止表格在页脚顶部滚动？

c） 屏幕上有几条灰色的线。有人知道这些是从哪里来的吗？我该怎么摆脱这些？

JSFiddle：http://jsfiddle.net/tHzWc/4/

问题是您在Javascript中创建了2个contractTable。以下代码创建一个新表，而不是使用现有的表：

var contractTable = document.createElement("TABLE");
contractTable.setAttribute("id", "contractTable");
document.body.appendChild(contractTable);

如果您将该代码替换为以下代码：

var contractTable = document.getElementById("contractTable");

然后它将使用现有的表，并将您的项目放在那里。

JSFiddle演示

c） 屏幕上有几条灰色的线。有人知道这些是从哪里来的吗？我该怎么摆脱这些？

这些是<hr>标签，您正在通过Javascript插入：

document.body.appendChild(document.createElement('hr'));

由于此代码在for循环中，因此它们实际上被添加了3次。只要删除这行代码就可以去掉灰色的线条。

JSFiddle演示

问题的解决方案-b）：

#footer {
 width: 100%;
 height: 80px;
 position: fixed;
 bottom: 0px;
 z-index: 999;
}

您有id＝"contractTable"的HTML元素，这个div最初就在那里，并由您的CSS和正在创建的这个表进行样式设置。删除分区。

html中有一个id为"contractTable"的div。然后在html正文的末尾添加一个表。

试试这个：

<div id="contractTableContainer"></div>


contractTable.setAttribute("id", "contractTable");
ocument.getElementById('contractTableContainer').appendChild(contractTable);
相关文章：