Fatal编程技术网
  • javascript/
  • 如何在javascript的html页面中添加多个视图？

如何在javascript的html页面中添加多个视图？

javascript html jquery css

如何在javascript的html页面中添加多个视图？,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我有两个html代码，其中index.html是视图1的主视图。但是我还想添加temparature.html作为视图2。如何从index.html页面执行此操作？我已经添加了我正在使用的所有文件，下面添加了这些文件 我想用作视图1的index.html <!DOCTYPE html> <html> <head> <title>Demo</title> <style> .hide {

我有两个html代码，其中index.html是视图1的主视图。但是我还想添加temparature.html作为视图2。如何从index.html页面执行此操作？我已经添加了我正在使用的所有文件，下面添加了这些文件

我想用作视图1的index.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 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>
和temparauture.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>


th{
颜色：#fff；
}
行号
日期
时间
测量类型
价值
var myArray=[]
$.ajax({
方法：'GET'，
网址：'http://webapi19sa-1.course.tamk.cloud/v1/weather/temperature',
成功：功能（响应）{
myArray=响应
构建表（myArray）
console.log（myArray）
}
})
函数构建表（数据）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i
在请求一个文件的建议之后，我在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>


演示
隐藏
{
显示：无；
}
视图1
视图2
视图3
视图1
th{
颜色：#fff；
}
行号
日期
时间
测量类型
价值
var myArray=[]
$.ajax({
方法：'GET'，
网址：'http://webapi19sa-1.course.tamk.cloud/v1/weather',
成功：功能（响应）{
myArray=响应
构建表（myArray）
console.log（myArray）
}
})
函数构建表（数据）{
var table=document.getElementById（'myTable'）
对于（变量i=0；i
根据您的代码，将temperature.html表格放在id为“page2”的div下面，并将所有支持链接带到index.html

<div class="view hide" id="page2">
       
</div>
将
view2.html
更改为
page2.html
，因为id和文件名应该相同才能更有效地工作。将
window.location.href
添加到
showView（视图名称）

从现在起，您不需要
隐藏
和
显示
。快走

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


视图2
到
page2.html

我尝试过使用它，但它在视图2中没有显示任何内容。$（'.view'）.hide（）；这会隐藏视图类，因此请从id=“page2”中删除类视图，因为这会同时隐藏视图2，谢谢大家。问题解决了。我添加了view 2 html，但运气不好。我缺少什么？@ArafatulHasan您是否将文件名从
view2.html
更改为
page2.html
我现在只使用一个文件。如果您查看我添加的最后一个代码段，它现在只有一个页面。你能帮我吗？@ArafatulHasan不，我一开始没看到你的密码。因为您有两个ajax请求，所以需要两个文件。保持两个文件的开头不变，并添加上述代码，然后将
view2.html
更改为
page2.html
。它工作得很好。。 
function showView(viewName) {
    ...
    window.location.href = viewName+'.html';  //since viewName is page2 so change filename to page2.html
}

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