堆棧內存溢出
  簡體   English   中英

如何在 javascript 的 html 頁面中添加多個視圖？

[英]How to add multiple views in html page in javascript?

 原文  2021-04-29 10:02:08  6   2    javascript/ html/ jquery/ css

問題描述

I have this two html code where index.html is the main view as view 1. But I also want to add the temparature.html as View 2. How can I do it from the index.html page? 我已經添加了我正在使用的所有文件都添加在下面。

index.html 我想用作視圖 1

<!DOCTYPE html>

<html>
<head>
   <title>Demo</title>
   <style>
       .hide
       {
           display: none;
       }
   </style>
   <button id="showPage1Btn" data-launch-view="page1">View 1</button>
   <button id="showPage2Btn" data-launch-view="page2">View 2</button>
   <button id="showPage3Btn" data-launch-view="page3">View 3</button> 
</head>
<body>
   <div id="lotOfPages">

   <div class="view" id="page1">
           <h1>View 1</h1>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
   th{ 
       color:#fff;
           }
</style>


<table class="table table-striped">
   <tr  class="bg-info">
       <th>Row Number</th>
       <th>Date</th>
       <th>Time</th>
       <th>Measurement Type</th>
       <th>Value</th>
   </tr>

   <tbody id="myTable">
       
   </tbody>
</table>

<script>
   var myArray = []

  $.ajax({
    method:'GET',
    url:'http://webapi19sa-1.course.tamk.cloud/v1/weather',
    success:function(response){
       myArray = response
       buildTable(myArray)
       console.log(myArray)
    }
  })

   function buildTable(data){
       var table = document.getElementById('myTable')

       for (var i = 0; i < data.length; i++){
           var row = `<tr>
                           <td>${i}</td>
                           <td>${data[i].date_time.substring(0, 10)}</td>
                           <td>${data[i].date_time.substring(11, 19)}</td>
                           <td>${Object.keys(data[i].data)[0]}</td>
                           <td>${data[i].data[Object.keys(data[i].data)[0]]}</td>
                     </tr>`
           table.innerHTML += row


       }
   }

</script>
       </div>
       
   <div class="view hide" id="page2">
           <h1>View 2</h1>
           
           
       </div>

   <div class="view hide" id="page3">
           <h1>View 3</h1>
       </div>

   </div>
   <script src="app.js"></script>

</body>
</html>

支持索引的JS.html

$(document).ready(function (e) {

   function showView(viewName) {
       $('.view').hide();
       $('#' + viewName).show();
   }

   $('[data-launch-view]').click(function (e) {
       e.preventDefault();
       var viewName = $(this).attr('data-launch-view');
       showView(viewName);
   });

});

還有我想看到的 temparature.html 視圖 2 。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
   th{ 
       color:#fff;
           }
</style>


<table class="table table-striped">
   <tr  class="bg-info">
       <th>Row Number</th>
       <th>Date</th>
       <th>Time</th>
       <th>Measurement Type</th>
       <th>Value</th>
   </tr>

   <tbody id="myTable">
       
   </tbody>
</table>

<script>
   var myArray = []

  $.ajax({
    method:'GET',
    url:'http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature',
    success:function(response){
       myArray = response
       buildTable(myArray)
       console.log(myArray)
    }
  })

   function buildTable(data){
       var table = document.getElementById('myTable')

       for (var i = 0; i < data.length; i++){
           var row = `<tr>
                           <td>${i}</td>
                           <td>${data[i].date_time.substring(0, 10)}</td>
                           <td>${data[i].date_time.substring(11, 19)}</td>
                           <td>${Object.keys(data[i])[2]}</td>
                           <td>${data[i].temperature}</td>
                     </tr>`
           table.innerHTML += row


       }
   }

</script>

在請求單個文件的建議之后，我在 div class="view" id="page2" 下添加了 temparature.html 文件，但沒有運氣。 你能幫助我嗎？

<!DOCTYPE html>
 
<html>
<head>
    <title>Demo</title>
    <style>
        .hide
        {
            display: none;
        }
    </style>
    <button id="showPage1Btn" data-launch-view="page1">View 1</button>
    <button id="showPage2Btn" data-launch-view="page2">View 2</button>
    <button id="showPage3Btn" data-launch-view="page3">View 3</button> 
</head>
<body>
    <div id="lotOfPages">

    <div class="view" id="page1">
            <h1>View 1</h1>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>Row Number</th>
        <th>Date</th>
        <th>Time</th>
        <th>Measurement Type</th>
        <th>Value</th>
    </tr>

    <tbody id="myTable">
        
    </tbody>
</table>

<script>
    var myArray = []

   $.ajax({
     method:'GET',
     url:'http://webapi19sa-1.course.tamk.cloud/v1/weather',
     success:function(response){
        myArray = response
        buildTable(myArray)
        console.log(myArray)
     }
   })

    function buildTable(data){
        var table = document.getElementById('myTable')

        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${i}</td>
                            <td>${data[i].date_time.substring(0, 10)}</td>
                            <td>${data[i].date_time.substring(11, 19)}</td>
                            <td>${Object.keys(data[i].data)[0]}</td>
                            <td>${data[i].data[Object.keys(data[i].data)[0]]}</td>
                      </tr>`
            table.innerHTML += row


        }
    }

</script>
        </div>
        
    <div class="view" id="page2">
            <h1>View 2</h1>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <style>
                th{ 
                    color:#fff;
                        }
            </style>
            
            
            <table class="table table-striped">
                <tr  class="bg-info">
                    <th>Row Number</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Measurement Type</th>
                    <th>Value</th>
                </tr>
            
                <tbody id="myTable">
                    
                </tbody>
            </table>
            
            <script>
                var myArray = []
            
               $.ajax({
                 method:'GET',
                 url:'http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature',
                 success:function(response){
                    myArray = response
                    buildTable(myArray)
                    console.log(myArray)
                 }
               })
            
                function buildTable(data){
                    var table = document.getElementById('myTable')
            
                    for (var i = 0; i < data.length; i++){
                        var row = `<tr>
                                        <td>${i}</td>
                                        <td>${data[i].date_time.substring(0, 10)}</td>
                                        <td>${data[i].date_time.substring(11, 19)}</td>
                                        <td>${Object.keys(data[i])[2]}</td>
                                        <td>${data[i].temperature}</td>
                                  </tr>`
                        table.innerHTML += row
            
            
                    }
                }
            
            </script>
            
        </div>

    <div class="view hide" id="page3">
            <h1>View 3</h1>
        </div>

    </div>
    <script src="app.js"></script>

</body>
</html>

2 個解決方案

解決方案1
 0  2021-04-29 10:31:34

根據您的代碼放置 temperature.html 表在 div 下方，其 id 為“page2”，並將所有支持鏈接帶到 index.html。

<div class="view hide" id="page2">
       
</div>

解決方案2
 0 已采納  2021-04-29 11:15:32

將view2.html更改為page2.html因為 id 和文件名應該相同才能更有效地工作。 將window.location.href添加到showView(viewName)

function showView(viewName) {
    ...
    window.location.href = viewName+'.html';  //since viewName is page2 so change filename to page2.html
}

從現在開始，您不需要hide和show 。 動起來

<div class='view' id='page2'>
  <h1>View 2</h1>
</div>

到page2.html

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何將JavaScript添加到HTML頁面？ 如何使用Javascript在Html頁面上添加Timer 如何從javascript向HTML頁面添加文本？ 如何將多個（2）javascript文件插入到html頁面中 使用JavaScript在HTML頁面中動態添加多個標簽 Javascript-如何在不干擾頁面HTML的情況下向頁面中的單詞添加鏈接 如何從javascript將html img添加到頁面，而不是在javascript中對其進行硬編碼 使用Javascript和變量將HTML添加到頁面 使用jQuery將JavaScript添加到HTML頁面 以編程方式在 html 頁面中添加 javascript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM