2017-02-22 9 views
-1

JavaScriptを使用してテーブルを作成しましたが、私のCSSを使用してレンダリングしません。どうすればそれを動作させることができますか?実際に私はより多くの助けが必要です、私のアイデアは1つのボタンを持つ画面を作成し、それをクリックすると画面の一番上から始まり、画面の最後に終わる1列のテーブルが表示されるはずです。あなたはそれにテーブルとボタンの後ろのスクリーンのすべてで開いているページをクリックすると、テーブルには、スクロール可能になり、各行は、テキストの下には、no urlラインとテキスト(URLテキストを)持っているので。ボタンは常に表示されます(ただし、クリックすると消えます)。 main.jsファイルはJavaScriptを使用してJavascriptテーブルをレンダリングしていません

 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> 

であり、これは、あなたが "目" を開き、TR」として、それを閉じて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; 
} 
+3

をDOMContentLoaded、あなたのCSSはどこにありますか? –

+0

申し訳ありません私はCSSファイルに多くのクラスがあるので、私はそれについて忘れました。今すぐチェックすることができます。おかげで多く – user2074325

答えて

0

です"第2に、コードを適切に記述/書式設定する方法を学んでください。コードを読みやすく、役立つでしょう。

また、イベントの機能であなたのJSをHTMLの最後に<スクリプト>タグを使用するか、実行だから

+1

これは答えとして適していません。それはコメントでなければなりません。 –

+0

申し訳ありませんが、すでにこの質問を書いていた午後10時半または午後11時を過ぎていましたが、今日は投稿できませんでした。うん、それはtrですが、私は変化し続けていますので、誤ってtrを代わりに投稿しました。このスクリプトはmain.jsファイルにあり、htmlではなく、なぜ私は

関連する問題