如何保留div內容和更新表內容
[英]how to keep div content and update table contents
問題描述
var sum =0 ; var total=0 ; var i = 1 ; function additem ( name , price ) { document.getElementById("selecteditems").innerHTML += "<p id='selected"+i+"' >" + name +" : " + price + " LE" ; document.getElementById("removebtn").innerHTML += "<p id='selected"+i+"'>" + "<button id='selected"+i+"' class='btn btn-danger' onclick='removeitem("+i+" , "+price+" ) ' style='font-size: 15px; height: 20px; padding: 0px 0px 0px 0px;' >Remove</button> " ; i++ ; sum += price ; } function removeitem ( i , price ) { document.getElementById("selected"+i ).innerHTML= "" ; sum -= price ; i-- ; } function addclass ( elem ) { // get all 'a' elements var a = document.getElementsByTagName('a'); // loop through all 'a' elements for (i = 0; i < a.length; i++) { // Remove the class 'active' if it exists a[i].classList.remove('current') ; } // add 'active' classs to the element that was clicked elem.classList.add('current'); }
* { margin: 0 px; padding: 0px ; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; font: bold 15px Tahoma ; letter-spacing: 1px ; } ul.topnav li { float: left; } ul.topnav li a{ display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav li a.current{ color: orange ; background-color: grey ; font-size: large ; } table.table-bordered > thead > tr > th{ border:2px solid black; } table.table-bordered > tbody > tr > td{ border:2px solid pink; } #btnl { margin: 5px ; background-color: red; } table td input , table td button { font-size: large ; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Restaurant</title> <link rel="stylesheet" href="css/main.css"> <script src="js/site.js"></script> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <header> <img src="2.JPG" alt="Happy Meal" width= "100% ;" height=150px ; > </header> <ul class="topnav"> <li><a href="#" class="current">Pizza</a></li> <li><a href="sandwich.html">Sandwiches</a></li> <li><a href="meals.html">Meals</a></li> <li><a href="crepe.html">Crepe</a></li> <li><a href="salade.html">Salade</a></li> <li><a href="about.html">About Us</a></li> </ul> <section> <div class="container-fluid"> <h1 style="margin: 20px 10px 10px 10px ;">Choose Items</h1> <div class="row" > <div class="col-md-8" style="background-color: #FAFAFA ;" id="menu"> <h3 style="margin: 10px 0px 10px 0px ; background-color: #E334CF ; color: white ; font-weight: bold ;">Pizza :</h3> <div id="pizza_menu"> <table class="table table-striped table-bordered" style="text-align: left ; border-color: black;" id="pizza_table"> <thead style="background-color: #D799F0 ; font: 18px sans-serif ;"> <tr style="font: bold 22px Tahoma;"> <th style="width: 55% ;">Type</th> <th style="width: 15% ;"></th> <th style="width: 15% ;">Price</th> <th style="color: white; font: bold 20px Tahoma ; width: 15% ; text-shadow: 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;">HUNGRY !</th> </tr> </thead> <tbody> <tr> <td><h5> Margarita Pizza</h5> <p>Mozzarella cheese, pepper, olives, onion and tomatoes</p> </td> <td> <img src="image/m.JPG" alt="Margarita" title="Margarita"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Margarita Pizza (S)' , 20 );"> Add Small </button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Margarita Pizza (L)', 35 );"> Add Large </button> </td> </tr> <tr> <td><h5> Cheese Lovers Pizza </h5> <p>Mix cheese, pepper, olives, onion and tomatoes</p> </td> <td> <img src="image/c.jpg" alt="Cheese Lovers" title="Cheese Lovers"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Cheese Lovers (S)', 20 );"> Add Small </button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Cheese Lovers (L)', 35 )">Add Large</button> </td> </tr> <tr> <td><h5> Vegetables Pizza </h5> <p>Vegetables, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td> <td> <img src="image/v.JPG" alt="Vegetables" title="Vegetables"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Vegetables Pizza (S)', 20 );"> Add Small </button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Vegetables Pizza (L)', 35 );"> Add Large </button> </td> </tr> <tr> <td><h5> Meat Pizza </h5> <p>Meat, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td> <td> <img src="image/meat.JPG" alt="Meat" title="Meat"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Meat Pizza (S)', 20 ); ">Add Small</button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Meat Pizza (L)', 35 ); ">Add Large</button> </td> </tr> <tr> <td><h5> Chicken Pizza </h5> <p>Chicken, chicken pane, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td> <td> <img src="image/ch.png" alt="Chicken" title="Chicken"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Chicken Pizza (S)', 20 ); ">Add Small</button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Chicken Pizza (L)', 35 ) ;">Add Large</button> </td> </tr> <tr> <td><h5> Mushroom Pizza </h5> <p>Mushroom, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td> <td> <img src="image/mu.JPG" alt="Mushroom" title="Mushroom"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Mushroom Pizza (S)', 20 ) ;"> Add Small </button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Mushroom Pizza (L)', 35 );"> Add Large </button> </td> </tr> <tr> <td><h5> Seafood Pizza </h5> <p>Seafood, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td> <td> <img src="image/s.JPG" alt="Seafood" title="Seafood"> </td> <td> <p>small : 20 LE</p> <P>large : 35 LE</P> </td> <td> <button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Seafood Pizza (S)', 20 ) ;">Add Small</button> <button type="button" class="btn btn-success" id="btnl" onclick="additem('Seafood Pizza (L)', 35 ) ;">Add Large</button> </td> </tr> </tbody> </table> </div> </div> <div class="col-md" style="background-color: #D9FFFA; font-size:18px; text-align: left ; margin: 0px 10px 10px 0px" id="order"> <h1 style="margin-bottom: 10px ; text-align: center ;">Your Order</h1> <div class="row"> <div class="col-md-7" style="margin: 10px 10px;" id="selecteditems"> </div> <div class="col-md-3" style="margin: 8px 10px ;" id="removebtn"> </div> </div> </div> </div> </div> </section> </body> </html>
我是Web開發的新手，這是我的第二個網站（在線餐廳）。 我有3個問題：
first：當用戶單擊導航欄“ topnav”中的鏈接時，我想更新表的內容（新表可能包含不同數量的行，但最后一列包含按鈕）。
第二個（可能是第一個的解決方案）：如果我必須定向到另一個包含不同表的頁面。 如何維護div“您的訂單”（給定id =“ order”）的詳細信息。 以及如何在重新加載時維護它。
第三：在JS函數additem中，當我單擊“刪除”按鈕時，詳細信息將被刪除，但按鈕本身不會被刪除！ ，盡管我給了相同的ID。
任何幫助將不勝感激，並在此先感謝。
html：
<body>
<header>
<img src="2.JPG" alt="Happy Meal" width= "100% ;" height=150px ; >
</header>
<ul class="topnav">
<li><a href="#" class="current">Pizza</a></li>
<li><a href="sandwich.html">Sandwiches</a></li>
<li><a href="meals.html">Meals</a></li>
<li><a href="crepe.html">Crepe</a></li>
<li><a href="salade.html">Salade</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
<section>
<div class="container-fluid">
<h1 style="margin: 20px 10px 10px 10px ;">Choose Items</h1>
<div class="row" >
<div class="col-md-8" style="background-color: #FAFAFA ;" id="menu">
<h3 style="margin: 10px 0px 10px 0px ; background-color: #E334CF ; color: white ; font-weight: bold ;">Pizza :</h3>
<div id="pizza_menu">
<table class="table table-striped table-bordered" style="text-align: left ; border-color: black;" id="pizza_table">
<thead style="background-color: #D799F0 ; font: 18px sans-serif ;">
<tr style="font: bold 22px Tahoma;">
<th style="width: 55% ;">Type</th>
<th style="width: 15% ;"></th>
<th style="width: 15% ;">Price</th>
<th style="color: white; font: bold 20px Tahoma ; width: 15% ; text-shadow: 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;">HUNGRY !</th>
</tr>
</thead>
<tbody>
<tr>
<td><h5> Margarita Pizza</h5> <p>Mozzarella cheese, pepper, olives, onion and tomatoes</p> </td>
<td> <img src="image/m.JPG" alt="Margarita" title="Margarita"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Margarita Pizza (S)' , 20 );"> Add Small </button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Margarita Pizza (L)', 35 );"> Add Large </button>
</td>
</tr>
<tr>
<td><h5> Cheese Lovers Pizza </h5> <p>Mix cheese, pepper, olives, onion and tomatoes</p> </td>
<td> <img src="image/c.jpg" alt="Cheese Lovers" title="Cheese Lovers"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Cheese Lovers (S)', 20 );"> Add Small </button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Cheese Lovers (L)', 35 )">Add Large</button>
</td>
</tr>
<tr>
<td><h5> Vegetables Pizza </h5> <p>Vegetables, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td>
<td> <img src="image/v.JPG" alt="Vegetables" title="Vegetables"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Vegetables Pizza (S)', 20 );"> Add Small </button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Vegetables Pizza (L)', 35 );"> Add Large </button>
</td>
</tr>
<tr>
<td><h5> Meat Pizza </h5> <p>Meat, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td>
<td> <img src="image/meat.JPG" alt="Meat" title="Meat"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Meat Pizza (S)', 20 ); ">Add Small</button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Meat Pizza (L)', 35 ); ">Add Large</button>
</td>
</tr>
<tr>
<td><h5> Chicken Pizza </h5> <p>Chicken, chicken pane, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td>
<td> <img src="image/ch.png" alt="Chicken" title="Chicken"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Chicken Pizza (S)', 20 ); ">Add Small</button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Chicken Pizza (L)', 35 ) ;">Add Large</button>
</td>
</tr>
<tr>
<td><h5> Mushroom Pizza </h5> <p>Mushroom, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td>
<td> <img src="image/mu.JPG" alt="Mushroom" title="Mushroom"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Mushroom Pizza (S)', 20 ) ;"> Add Small </button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Mushroom Pizza (L)', 35 );"> Add Large </button>
</td>
</tr>
<tr>
<td><h5> Seafood Pizza </h5> <p>Seafood, pepper, olives, onion, tomatoes and mozzarella cheese</p> </td>
<td> <img src="image/s.JPG" alt="Seafood" title="Seafood"> </td>
<td> <p>small : 20 L.E</p> <P>large : 35 L.E</P> </td>
<td>
<button type="button" class="btn btn-success" style="margin: 5px ;" onclick="additem('Seafood Pizza (S)', 20 ) ;">Add Small</button>
<button type="button" class="btn btn-success" id="btnl" onclick="additem('Seafood Pizza (L)', 35 ) ;">Add Large</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md" style="background-color: #D9FFFA; font-size:18px; text-align: left ; margin: 0px 10px 10px 0px" id="order">
<h1 style="margin-bottom: 10px ; text-align: center ;">Your Order</h1>
<div class="row">
<div class="col-md-7" style="margin: 10px 10px;" id="selecteditems">
</div>
<div class="col-md-3" style="margin: 8px 10px ;" id="removebtn">
</div>
</div>
</div>
</div>
</div>
</section>
這是Javascript函數：
function additem ( name , price ) {
document.getElementById("selecteditems").innerHTML += "<p id='selected"+i+"' >" + name +" : " + price + " L.E" ;
document.getElementById("removebtn").innerHTML += "<p id='selected"+i+"'>" + "<button id='selected"+i+"' class='btn btn-danger' onclick='removeitem("+i+" , "+price+" ) ' style='font-size: 15px; height: 20px; padding: 0px 0px 0px 0px;' >Remove</button> " ;
i++ ;
sum += price ;
}
function removeitem ( i , price ) {
document.getElementById("selected"+i ).innerHTML= "" ;
sum -= price ;
i-- ;
}
1 個解決方案
解決方案1
0 2018-01-28 00:45:22
這將使您入門，我建議您首先使用某種數據結構，以便您可以在我僅使用JSON的示例中根據需要對其進行更新。 請注意，我使用的數據只是菜單外觀的一小部分（您可以根據需要添加詳細信息）。 現在的目標是讓您了解如何以更動態的方式更新數據。 您將注意到，如果您單擊該示例，那么您的頂部導航將更新菜單，而無需重新加載頁面。 現在，僅連接了前兩個選項（您將需要連接其余的兩個選項）。 導航鏈接中data-menu-link屬性中的值必須與一個屬性匹配，該屬性包含javascript內部menuData JSON中包含的對象數組。 您可以看到我如何添加比薩餅和三明治作為JSON中的前兩個菜單項。
例如： https ： //codepen.io/larryjoelane/pen/oEvZGJ
HTML：
body {
padding: 0;
margin: 0;
}
header {
display: flex;
align-items: center;
height: 6rem;
background-color: black;
}
header ul {
padding: 0;
margin: 0;
margin-left: 6rem;
}
header ul li {
display: inline-block;
}
header ul li a {
text-decoration: none;
color: white;
font-size: 1.3rem;
margin: 0 0.5rem;
}
header ul li a:hover {
text-decoration: underline;
}
#menu td {
padding: 1rem 1rem;
text-align: center;
}
#menu button {
padding: 0.5rem 1rem;
margin: 0.5rem 0.25rem;
border-radius: 1.5rem;
}
body {
padding: 0;
margin: 0;
}
header {
display: flex;
align-items: center;
height: 6rem;
background-color: black;
}
header ul {
padding: 0;
margin: 0;
margin-left: 6rem;
}
header ul li {
display: inline-block;
}
header ul li a {
text-decoration: none;
color: white;
font-size: 1.3rem;
margin: 0 0.5rem;
}
header ul li a:hover {
text-decoration: underline;
}
#menu td {
padding: 1rem 1rem;
text-align: center;
}
#menu button {
padding: 0.5rem 1rem;
margin: 0.5rem 0.25rem;
border-radius: 1.5rem;
}
CSS：
var menuData = {
"pizza": [
{
"Pizza Type": "Margarita Pizza",
"Toppings": "Mozzarella cheese, pepper, olives, onion and tomatoes",
"Pricing": "small : 20 L.E large: 35 L.E",
"HUNGRY !":
"<button type='button' data-small-price='20'>Add Small</button> <button type='button' data-large-price>Add Large</button>"
},
{
"Pizza Type": "Pepperoni",
"Toppings": "Mozzarella cheese, pepperoni",
"Pricing": "small : 18 L.E large: 32 L.E",
"HUNGRY !":
"<button type='button' data-small-price='20'>Add Small</button> <button type='button' data-large-price>Add Large</button>"
}
],
"sandwiches": [
{
"Sandwich Type": "Rueben",
"Description": "smoked corn beef, sauerkraut on marble rye",
"Pricing": "half : 8 L.E full: 16 L.E",
"HUNGRY !":
"<button type='button' data-small-price='8'>Add Small</button> <button type='button' data-large-price='16'>Add Large</button>"
},
{
"Sandwich Type": "Club",
"Description": "roast beef, turkey, and ham on sourdough",
"Pricing": "half : 9 L.E full: 15 L.E",
"HUNGRY !":
"<button type='button' data-small-price='9'>Add Small</button> <button type='button' data-large-price='15'>Add Large</button>"
}
]
};
var selector = "menu";
/*
call the jsonToTable function on page load to
display the default menu.
*/
jsonToTable(menuData.pizza, selector);
// register event listener to for menu nav click events
document.querySelector('[data-top-nav]')
.addEventListener('click', function($event) {
if ($event.target !== $event.currentTarget) {
var menu = $event.target.getAttribute('data-menu-link');
console.log(menuData[menu]);
// load the correct menu
jsonToTable(menuData[menu], selector);
}
$event.stopPropagation();
});
function jsonToTable(json, selector) {
//begin function
//array to hold the html for the table
var html = [];
//add the opening table and tablebody tags
html.push("<table>\n<tbody>");
//begin adding the table headers
html.push("<tr>");
//loop through the property names of the first object
for (var propertyNames in json[0]) {
//begin for in loop
// uncomment if you want to use the propery names as headings
html.push("<th>" + propertyNames + "</td>");
} //end for in loop
html.push("</tr>");
//loop through the array of objects
json.forEach(function(item) {
//begin forEach
//add the opening table row tag
html.push("<tr>");
//loop though each of the objects properties
for (var key in item) {
//begin for in loop
//append the table data containing the objects property value
html.push("<td>" + item[key] + "</td>");
} //end for in loop
//add the closing table row tag
html.push("</tr>");
}); //end forEach
//add the closing table and table body tags
html.push("<table>\n</tbody>");
//testing display of results
document.getElementById(selector).innerHTML = html.join("");
} //end function
JavaScript：
var menuData = { "pizza": [ { "Pizza Type": "Margarita Pizza", "Toppings": "Mozzarella cheese, pepper, olives, onion and tomatoes", "Pricing": "small : 20 LE large: 35 LE", "HUNGRY !": "<button type='button' data-small-price='20'>Add Small</button> <button type='button' data-large-price>Add Large</button>" }, { "Pizza Type": "Pepperoni", "Toppings": "Mozzarella cheese, pepperoni", "Pricing": "small : 18 LE large: 32 LE", "HUNGRY !": "<button type='button' data-small-price='20'>Add Small</button> <button type='button' data-large-price>Add Large</button>" } ], "sandwiches": [ { "Sandwich Type": "Rueben", "Description": "smoked corn beef, sauerkraut on marble rye", "Pricing": "half : 8 LE full: 16 LE", "HUNGRY !": "<button type='button' data-small-price='8'>Add Small</button> <button type='button' data-large-price='16'>Add Large</button>" }, { "Sandwich Type": "Club", "Description": "roast beef, turkey, and ham on sourdough", "Pricing": "half : 9 LE full: 15 LE", "HUNGRY !": "<button type='button' data-small-price='9'>Add Small</button> <button type='button' data-large-price='15'>Add Large</button>" } ] }; var selector = "menu"; /* call the jsonToTable function on page load to display the default menu. */ jsonToTable(menuData.pizza, selector); // register event listener to for menu nav click events document.querySelector('[data-top-nav]') .addEventListener('click', function($event) { if ($event.target !== $event.currentTarget) { var menu = $event.target.getAttribute('data-menu-link'); console.log(menuData[menu]); // load the correct menu jsonToTable(menuData[menu], selector); } $event.stopPropagation(); }); function jsonToTable(json, selector) { //begin function //array to hold the html for the table var html = []; //add the opening table and tablebody tags html.push("<table>\\n<tbody>"); //begin adding the table headers html.push("<tr>"); //loop through the property names of the first object for (var propertyNames in json[0]) { //begin for in loop // uncomment if you want to use the propery names as headings html.push("<th>" + propertyNames + "</td>"); } //end for in loop html.push("</tr>"); //loop through the array of objects json.forEach(function(item) { //begin forEach //add the opening table row tag html.push("<tr>"); //loop though each of the objects properties for (var key in item) { //begin for in loop //append the table data containing the objects property value html.push("<td>" + item[key] + "</td>"); } //end for in loop //add the closing table row tag html.push("</tr>"); }); //end forEach //add the closing table and table body tags html.push("<table>\\n</tbody>"); //testing display of results document.getElementById(selector).innerHTML = html.join(""); } //end function
**我稍后會添加更多詳細信息**
如何重復更新一個內容 <div> 僅使用JavaScript？
[英]How to repeatedly update the contents of a <div> by only using JavaScript?
如何動態更新HTML中div的內容並保持以前的樣式？
[英]How to dynamically update the contents of a div in HTML and maintain the previous style?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.