2017-12-28 24 views
0

一度ロードされたデータベースから、行数と列数にデータを表示するhtmlページがあります。私はそれだけでランダムなデータでループすることができます。私はちょうど得ることができないまたは行く方法について知っているWebページにデータを取得しています。私はいくつかの興味深い発見、例えばsocket.io、fsを読んだが、それでもそれは得られない。サーバー側からデータを取得し、Webページのdivに表示

以下はクライアント側のコードです。

ここでは、サーバー側とクライアント側の両方をリンクする方法の例を参考にすると、多くの役に立ちます。

私はexpress js、mongodb、html、css、javascriptを使用しています。

* { 
 
    margin: 0px; 
 
} 
 

 
#admin { 
 
    margin-top: 100px; 
 
    font-family: "Times New Roman"; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    margin-left: 400px; 
 
    line-height: 30px; 
 
} 
 

 
body { 
 
    background-color: white; 
 
    font-family: "Intro-Inline"; 
 
} 
 

 

 
/*wrapper for the main container*/ 
 

 
#wrapper { 
 
    margin: auto; 
 
} 
 

 

 
/*all divs under this container to be maintained in aspect*/ 
 

 
#container { 
 
    position: absolute; 
 
    margin: 0px auto; 
 
} 
 

 

 
/*div for menu*/ 
 

 
.divmenu { 
 
    width: 50px; 
 
    height: 50px; 
 
    float: left; 
 
    margin-left: 0vh; 
 
    border-width: 4px; 
 
    border-style: solid border-color: green; 
 
} 
 

 

 
/*css for the body*/ 
 

 
#bodydiv { 
 
    margin: 0 auto; 
 
    padding: 0px; 
 
} 
 

 
#leftdiv { 
 
    margin-top: 30vh; 
 
    margin-left: 30vh; 
 
    width: 80vh; 
 
    height: 75vh; 
 
    float: left; 
 
    /* border-width: 4px; 
 
     border-style: solid; 
 
     border-color: yellow;*/ 
 
} 
 

 
.innerdiv { 
 
    align-content: center; 
 
    align-self: center; 
 
    width: 80vh; 
 
    /* height:20vh;*/ 
 
    background-color: gray; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    display: inline-block; 
 
    border-color: black; 
 
} 
 

 
#tabDiv { 
 
    /* align-content: center; 
 
     align-self: center;*/ 
 
    width: 80vh; 
 
    /* height:20vh; 
 
     background-color: gray;*/ 
 
    /* border-width: 1px; 
 
     border-style: solid; 
 
     border-color: black;*/ 
 
    display: inline-block; 
 
} 
 

 
.innertop { 
 
    z-index: 99; 
 
    position: fixed; 
 
    width: 34.5vh; 
 
    height: 5vh; 
 
    background-color: black; 
 
    color: white; 
 
    font-stretch: extra-expanded; 
 
    font-size: 25px; 
 
    line-height: 30px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: black; 
 
} 
 

 
.innerbottom { 
 
    z-index: 99; 
 
    position: fixed; 
 
    width: 35vh; 
 
    height: 5vh; 
 
    background-color: gray; 
 
    color: white; 
 
    font-stretch: extra-expanded; 
 
    font-size: 28px; 
 
    line-height: 30px; 
 
} 
 

 

 
/*div working for contents of music*/ 
 

 
.contentdiv { 
 
    width: 20vh; 
 
    height: 15vh; 
 
    margin-top: 2vh; 
 
    display: inline-block; 
 
    margin-left: 1vh; 
 
} 
 

 
.arrowdiv { 
 
    width: 8vh; 
 
    height: 19.8vh; 
 
    margin: 0vh; 
 
    line-height: 1vh; 
 
    vertical-align: middle; 
 
    background-color: #131212; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 

 
.ccontentdiv { 
 
    width: 20vh; 
 
    height: 15vh; 
 
    line-height: 2vh; 
 
    margin-top: 2vh; 
 
    margin-left: 1vh; 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 

 
.rcontentdiv { 
 
    width: 20vh; 
 
    height: 15vh; 
 
    line-height: 2vh; 
 
    margin-top: 2vh; 
 
    margin-left: 1vh; 
 
    background-color: beige; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.imgdiv { 
 
    margin-top: 50px; 
 
    margin-left: 10px; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 

 

 
/*div on mouseover*/ 
 

 
.leftsub { 
 
    width: 60px; 
 
    height: 10px; 
 
    float: left; 
 
    border-width: 2px; 
 
    border-style: solid; 
 
    border-color: green; 
 
} 
 

 
.popup { 
 
    width: 145px; 
 
    height: 40px; 
 
    float: right; 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-right: 50px; 
 
    line-height: 50%; 
 
} 
 

 
.col1 { 
 
    width: 35px; 
 
    height: 40px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: black; 
 
    color: white; 
 
    border-right: 1px solid white; 
 
} 
 

 
.col2 { 
 
    width: 35px; 
 
    height: 40px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.col3 { 
 
    width: 35px; 
 
    height: 40px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    background-color: black; 
 
    color: white; 
 
    border-left: 1px solid white; 
 
} 
 

 
.col4 { 
 
    width: 20px; 
 
    height: 30px; 
 
    margin-bottom: 3px; 
 
    margin-top: 5px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 

 
.img { 
 
    max-width: 180px; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>TODO supply a title</title> 
 
    <link href="/css/index.css" rel="Stylesheet" /> 
 
    <script src="/javascript/index.js" type="text/javascript"></script> 
 
    <script> 
 
    var popup = document.createElement('div'); //div 
 
    popup.className = "popup"; 
 
    var innercol = ["col1", "col2", "col3", "col4"]; 
 
    for (j = 0; j < 3; j++) { 
 
     var colone = document.createElement('div'); //div 
 
     var imgcol = document.getElementById("col4"); 
 
     var colimg = document.createElement('img'); 
 
     colimg.className = "col4"; 
 
     colimg.src = "images/blackarrow.png"; 
 
     colone.className = innercol[j]; 
 
     popup.appendChild(colone); 
 
    } 
 

 
    popup.appendChild(colimg); 
 

 
    function multidivs() { 
 
     var columnnames = ["arrowdiv", "contentdiv", "ccontentdiv", "rcontentdiv"]; //styles for innerdiv 
 
     var columnids = ["arrow", "content", "ccontent", "rcontent"]; 
 
     var rows = 100; 
 
     var col = 4; 
 
     for (x = 0; x < rows; x++) { 
 
     var row = document.createElement('div'); 
 
     row.className = "innerdiv"; 
 

 
     for (var i = 0; i < col; i++) { 
 
      var columndiv = document.createElement('div'); //div 
 
      columndiv.className = columnnames[i]; 
 
      columndiv.id = columnids[i]; 
 
      // var socket =io(); 
 
      //socket.on('content', function(msg){ 
 
      //console.log(msg); 
 
      //document.getElementById("content").innerHTML=msg; 
 
      //}) 
 

 
      if (columndiv.className === columnnames[0]) { 
 
      attachImage(columndiv); 
 

 
      } 
 

 
      row.appendChild(columndiv); 
 

 
     } 
 
     document.getElementById('leftdiv').appendChild(row); 
 
     } 
 
     // alert("total rows"+x); 
 
    } 
 
    //attach arrow image onload and thn on mouseover and mouseout 
 
    function attachImage(columndiv) { 
 
     var img = document.createElement('img'); 
 
     img.className = "imgdiv"; 
 
     img.src = "images/orangearrow.png"; 
 
     columndiv.appendChild(img); 
 

 
     domouseover(); /*this will change the arrow directions and also add popup*/ 
 
     domouseout(); /*take out popup*/ 
 
     //onmouseover changes the arrow 
 
     function domouseover() { 
 
     columndiv.addEventListener("mouseover", function() { 
 
      img.src = "images/whitearrow.png"; 
 
      columndiv.appendChild(img); 
 

 
      columndiv.appendChild(popup); 
 
     }); 
 
     } 
 

 
     function domouseout() { 
 
     columndiv.addEventListener("mouseout", function() { 
 
      img.src = "images/orangearrow.png"; 
 
      columndiv.removeChild(popup); 
 
     }); 
 
     } 
 

 
    } 
 
    </script> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="container"> 
 
     <form action=""> 
 
     <div id="bodydiv"> 
 
      <div id="leftdiv"> 
 
      <script type="text/javascript"> 
 
       multidivs(); 
 
      </script> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

+0

私は実行可能なスニペットにコードを追加しています。私はロジックを変更しませんでしたが、あなたのHTMLの '

関連する問題