[英]How to add multiple views in html page in javascript?
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>
根据您的代码放置 temperature.html 表在 div 下方,其 id 为“page2”,并将所有支持链接带到 index.html。
<div class="view hide" id="page2">
</div>
将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.