Javascript表格不使用CSS呈現

-1

我使用JavaScript創建了一個表格，但它並沒有使用我的CSS呈現。所以我怎麼才能使它工作？其實我需要更多的幫助，我的想法是創建一個有一個按鈕的屏幕，一旦你點擊它，一個菜單是從屏幕頂部開始的一列的一個表格，並且在屏幕的末尾應該顯示。表格會滾動，每行都有文本（url文本），文本下沒有url行，所以當你點擊它時，頁面在表格和按鈕後面的所有屏幕上都會打開。該按鈕應該始終顯示（但當它點擊時它會消失）。的main.js文件是Javascript表格不使用CSS呈現

 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; 
}

來源

2017-02-22 user2074325

那麼，哪裏是你的CSS？ –

對不起，我忘了它，因爲我在css文件中有很多類。你現在可以檢查它。非常感謝 – user2074325

Javascript表格不使用CSS呈現

回答

相關問題