Question

我使用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;
}

Answer 1

在HTML中

打开“th”并将其关闭为“tr”。其次，请学习正确编写/格式化代码 - 阅读代码并帮助您更容易。

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

Javascript表不使用CSS渲染

1 个答案: