JavaScript表不使用CSS渲染

我使用JavaScript创建了一个表，但是它不会使用我的CSS渲染。那么我该如何使其运行呢？实际上，我需要更多的帮助，我的想法是创建一个具有一个按钮的屏幕，一旦您单击它，一个菜单是从屏幕顶部开始的一个列的表，在屏幕末尾结束应显示。该表将是可滚动的，每行都有文本（URL文本），而文本下没有URL行，因此当您单击它时，页面在表和按钮后面的所有屏幕中打开。该按钮应始终显示（但是当我单击它时它会消失）。main.js文件是

     function makeTableHTML() {
    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    var myArray = [ [ "Name, http://www.google.com" ],
            [ "Name, http://www.google.com" ] ];
    var result = '<table width = "300">';
    for (var i = 0; i < myArray.length; i++) {
        result += "<tr><td>";
        if (i < 10) {
            result += "0" + i + "  ";
        } else {
            result += i + "  ";
        }
        result += '<a href="' + myArray[i][0] + '">';
        result += myArray[i][1] + "</a>";
        result += "<td></tr>";
    }
    result += "</table>";
    document.write(result);
    document.getElementById("channelsmenu").classList.toggle(result);
}
function hideTableHTML() {
    var x = document.getElementById('channelsmenu');
    x.style.display = 'none';
}

我的html是

    <!DOCTYPE html>
<html>
<head>
<title>5Star-IPTV</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/main.js"></script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>
                    <div id="channelsmenu" class="dropdown-content"></div>
                </td>
                <td class="buttons-col"><input type="image"
                    src="channels-menu.png" class="buttons" alt="channels menue"
                    onMouseOver="this.src='channels-menu-1.png'"
                    onMouseOut="this.src='channels-menu.png'" onclick="makeTableHTML()" /></td>
                <td class="buttons-col"><input type="image"
                    src="return-button.png" alt="return button" class="buttons"
                    onMouseOver="this.src='return-button-1.png'"
                    onMouseOut="this.src='return-button.png'" onclick="hideTableHTML()" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

这是CSS

table {
    width: 100%;
    border: 1px solid black;
    background-color: #808080;
}
tr {
    width: 100%;
    align: right;
}
th, td {
    text-align: right;
}       background-color: #808080;
}
.buttons-col {
    text-align: center;
    width: 90px;
    padding-top: 5px;
}

在html中，您打开" th"，然后将其关闭为" tr"。其次，请学习正确编写/格式化您的代码 - 阅读代码并为您提供帮助会更容易。

此外，使用＆lt;脚本>在HTML末尾的标签或在事件Domcontentloaded上的函数中运行JS

相关内容

最新更新

热门标签：