-1

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

1 回答 1

0

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

此外，在 HTML 末尾使用 < script > 标签或在事件 DOMContentLoaded 的函数中运行您的 JS

于 2017-02-22T23:25:36.913 回答