如何保留div内容和更新表内容

时间：2018-01-27 23:11:34

标签： javascript html

＆＃13;
＆＃13; 
var sum =0 ;
var total=0 ;
var i = 1 ;

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-- ;
    }

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');
}
＆＃13; 
* {
    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 ;
}
＆＃13; 
<!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 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>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我是网络开发的新手，这是我的第二个网站（在线餐厅）。 我有3个问题：

first：当用户点击导航栏中的链接时，我想更新表的内容＆＃34; topnav＆＃34; （新表可能包含不同的行数，但最后一列包含按钮）。

秒（可能是第一个解决方案）：如果我必须指向包含不同表的另一个页面。如何保持div＆＃34;您的订单＆＃34;的详细信息（给定id =＆＃34; order＆＃34;）。以及如何在重新加载时保持它。

JS函数additem中的

第三：，当我点击按钮＆＃34;删除＆＃34;细节被删除但按钮本身没有！ ，虽然我给它同样的身份。

任何帮助都将受到赞赏，并提前感谢。

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 个答案:

答案 0 :(得分：0)

这将帮助您入门我建议您先使用某种数据结构，以便在我的示例中根据需要更新它，我只是使用JSON。请注意，我使用的数据只是菜单外观的一小部分（您可以根据需要添加详细信息）。目前的目标是让您了解如何以更动态的方式更新数据。您会注意到，如果您点击示例，您的顶部导航将更新您的菜单而不重新加载页面。现在只连接前两个选项（你需要连接其余选项）。 nav链接中data-menu-link属性中的值必须与包含javascript中menuData JSON中包含的对象数组的属性匹配。您可以看到我如何添加披萨和三明治作为JSON中的前两个菜单项。

示例：https://codepen.io/larryjoelane/pen/oEvZGJ

<强> HTML：

               

  • 披萨
    •         
  • 三明治
    •         
  • 餐
    •         
  • 绉
    •         
  • 的salade
    •         
  • 关于我们
    •                                 选择项目                                 比萨 ：             

            </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>

    <强> CSS： 

    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;
}

    <强> JavaScript的： 

    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

    **我稍后会添加更多细节**

    相关问题
    最新问题