Javascript .', 114.99)); 项目列表。推送（新项目（'soccergear'、'Storelli Exoshield Goalie Jersey'、'Block kicks to net，Storelli®Exoshield GK成人守门员角斗士球衣具有最

.', 114.99)); 项目列表。推送（新项目（'soccergear'、'Storelli Exoshield Goalie Jersey'、'Block kicks to net，Storelli®Exoshield GK成人守门员角斗士球衣具有最大的灵活性。这款球衣在肘部采用聚氨酯泡沫保护，可承受立柱之间的冲击。为了增加舒适度，压缩材料可吸湿，保持皮肤凉爽舒适穿着轻盈的Storelli®Exoshield GK成人守门员角斗士球衣，干爽、俯冲和防守，不受干扰。'，64.99）； 项目列表推送（新项目（'soccergear'、'Storelli BodyShield Slider Shorts'），"Storelli®滑块的经典贴合感为您提供卓越的保护。轻质泡沫垫提供高性能保护，让您免受冲击、肿胀和割伤，而独特的设计让您在垫块固定的同时自由移动。使用S系列的抗菌技术和轻质垫块，在赛场上保持安全torelli®男子滑杆短裤。”，59.99）； 物品清单。推送（新物品（'soccergear'，'Adidas Estadio Teamp双肩包'，'Adidas®Estadio Teamp双肩包II'，以Adidas®Estadio Team双肩包II的风格运送你的装备往返赛场。该双肩包以足球为设计理念，采用多隔间结构，方便整理和存放你的所有装备。LoadSpring™ 科技为肩带增添舒适感，让您可以携带更多设备。FreshPAK™ 鞋袋可在整个赛季保持装备的新鲜度。”，55.00）； //添加视频游戏 物品列表。推送（新物品（‘视频游戏’、‘星球大战前线’、‘访问原始星球大战中的经典行星’）™ 三部曲，以史无前例的真实感和真实感，将你带到一个遥远的星系（59.99）； 项目列表。推送（新项目（‘视频游戏’、‘正义事业3’、”地中海美第奇共和国正遭受着对权力贪得无厌的独裁者迪拉维洛将军的残酷控制。里科·罗德里格斯（Rico Rodriguez）是一名执行任务的人，他以任何必要的手段摧毁将军的野心。他拥有400多平方英里从天空到海底的完全自由，拥有庞大的武器库y、 小工具和交通工具，准备以你能想象的最具创造性和爆炸性的方式释放混乱。”，59.99）； 项目列表。推送（新项目（《电子游戏》，《使命召唤黑色行动III》，《使命召唤：黑色行动III》是终极的三合一体验。在这场战役中，你必须在新冷战的热点地区找到你失踪的兄弟。多人游戏具有一个新的基于动量的链式移动系统，允许玩家以巧妙的方式在环境中流畅地移动。不Treyarch的标题将是完整的，没有它的签名僵尸提供“邪恶的阴影”有自己独特的故事情节，开箱即用。'），59.99）； 物品清单。推送（新物品（‘视频游戏’、‘辐射4’、‘史诗故事情节’、‘肾上腺素激发动作’和爆炸性刺激重现。辐射系列以辐射4的形式回归。抓起你的控制器，准备跳回这个传奇系列的故事情节。’，59.99）； 项目列表。推送（新项目（《电子游戏》，《光环5：守护者》，《神秘而不可阻挡的力量》威胁着银河系，总酋长失踪，他的忠诚受到质疑。在一部跨越三个世界的4人合作史诗中，体验迄今为止最具戏剧性的光环故事。以新的多人模式挑战朋友和对手：战区、大规模24人战斗，以及竞技场，纯4对4竞争性战斗。*'，59.99）； 物品列表。推送（新物品（‘视频游戏’，“刺客信条辛迪加”，”欢迎来到家庭——伦敦，1868年。工业革命使特权阶层的钱包发胖，而工人阶级却在挣扎着生存——直到两名刺客崛起，领导世界上第一个有组织犯罪家庭。征服伦敦街头。让统治阶级屈膝。在一场不同于传统的内心冒险中创造历史你以前玩过的任何游戏。”，59.99）； //显示项目列表 displayAll（）； //选择新类别时，它将更正并显示该类别类型的项目 $（'#category'）。关于（'change'，function（））{ //使用“值”属性读取所选类别 var category=$（this.val（）； 如果（类别='0'） displayAll（）；//显示所有项目 其他的 displaySelectedItems（类别）；//显示所选项目 }); //选择“类别”时，将显示具有相同类型的项目 功能显示SelectedItems（类别）{ var itemInfo=''； /*显示数据： 使用for循环遍历item_列表数组中的每个元素 */ 对于（var i=0；i

//Activates "Add" button so cart can be populated
$('#item-list').on('click', '.addme', function(){ 

// 1. Read the item index using data- attribute
var index = $(this).data('index');

if(!inCart(index)){
  cart.push(index);
} 

// 3. Update the cart list and total credits
displayCartItems();
checkCart();

// update price
calculateTotalPrice();
});

//function to check if items are in cart
function inCart(index){
for (var i=0; i<cart.length; i++){
if (cart[i] == index)
  return true;
}
return false;
}

//Displays the shopping cart items
function displayCartItems(){
// create a table row for each item in cart array
var itemInfo = '';
for (var i=0; i<cart.length; i++){
  var index = cart[i];
  itemInfo += createTableRow(index);
}
$('#selected-list').html(itemInfo);
}

//Constructs the shopping cart table
function createTableRow(index){
  var trow = '';

  trow += "<tr><td>"+item_list[index].title + "</td>>";
  trow += "<td id='itemsprice'>"+item_list[index].price + "</td>";
  trow += "<td><select class='item-quantity' data-quantity='"+index+"'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option></td>";
  trow += "<td id='tc-item'>"+item_list[index].price+"</td>"
  trow += "<td><button type='button' class='delete-item' value='"+index+"'>Delete</button></td></tr>";
  return trow;
}

//When quantity is changed change the value and compute new totals
$('#selected-list').on('change', '.item-quantity', function(){

  calculateTotalPrice();

});


//If delete button is pressed in cart, the item is removed from the cart
$('#selected-list').on('click', '.delete-item', function(){
var index = $(this).val();

removeItemFromCart(index);
calculateTotalPrice();
checkCart();

});

function checkCart(){
 if(cart.length == 0){
  $('#empty-cart').html("Your cart is empty!");
} else {
  $('#empty-cart').html("");
}
}

//function to remove items from the shopping cart
function removeItemFromCart(index){
// identify and remove the index from the cart and redisplay cart table
var pos = -1;
for (var i=0; i<cart.length; i++){
  if (index == cart[i]){
    pos = i;
    break;
  }
  }
if (pos>-1){
  cart.splice(pos, 1);
  // reset the cart table
  displayCartItems();
} else {
  alert("Could not find!");
}
}

function calculateTotalPrice(){
var quantity = $('.item-quantity').val();
var subtotal = 0;
var tax = 0;
var shipping = 0;
var total = 0;

//for loop to calculate the subtotal
for(var i = 0; i < cart.length; i++){
  var productPrice = item_list[cart[i]].price;
  subtotal += productPrice * quantity; 
  }

//Percent taxed is 6%
var taxPerc = .06;

//Calculating taxes
tax = subtotal * taxPerc;

//Percent for shipping is 2%
var shippingPerc = .02;

//Calculating shipping
shipping = subtotal * shippingPerc;

//Calculating total
total = subtotal + tax + shipping;

//Displaying totals
//$('#tc-item').html(totalItemPrice.toFixed(2));
$('#subtotal').html(subtotal.toFixed(2));
$('#tax').html(tax.toFixed(2));
$('#shipping').html(shipping.toFixed(2));
$('#total').html(total.toFixed(2));
}

//Activates the Display cart and Hide cart buttons in shopping cart
$('#show-cart').on('click', function(){
$('#selected-list').show();
});
$('#hide-cart').on('click', function(){
$('#selected-list').hide();
});

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"     "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta charset="utf-8">
 <!-- Set the viewport so this responsive site displays correctly on mobile     devices -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Sam's Discount Store </title>
 <!-- Include bootstrap CSS -->
 <link rel="stylesheet"     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script>
<style type="text/css">
 .courselist { cursor: pointer;}
 .t-head { color: #fff; background-color: #333366; font-size: 20px; line-    height: 20px; }
 #top-box, #footer { background-color: #330066; color: #fff; text-align:     center;}
 #content {border: 1px solid #330099;}
</style>
<script>
$(function(){
/* The following  function defines a constructor for creating an array of     objects with four properties.
The keyword "this" refers to the instance of the object
*/
function Item(type,title,description,price){
  this.type = type;
  this.title = title;
  this.description = description;
  this.price = price;

}

//create an array to store items
var item_list = [];
var cart = []; //store index of elements in the shopping cart

//add items
//add baseballgear items
item_list.push(new Item('baseballgear','Louisville Slugger', 'The finest craftsmanship and finest materials ensure stepping to the plate with the Louisville Slugger® M9 Maple M110 Bat will allow you to swing what the pros swing.', 79.99 ));
item_list.push(new Item('baseballgear','Marucci Bat', 'Named for one of the most lethal hitters in the game, the Marucci® CUTCH22 Pro Model Baseball Bat features the same cut and finish swung by MLB® center fielder, Andrew McCutchen. The "Cutch" features a large, powerful, balanced barrel with a sleek cherry red and grey finish to deliver maximum performance at the plate. This adult wooden bat is also handcrafted and bone-rubbed to ensure superior quality and surface hardness.', 139.99));
item_list.push(new Item('baseballgear', 'Rawlings Glove', "Unrivaled quality season after season, the Rawlings® 11.25'' Pro Preferred® Series Glove returns to provide elite craftsmanship and superior performance for elite middle infielders.",349.99));
item_list.push(new Item('baseballgear', 'Wilson Glove', "Enhance your field performance with unrivaled dependability with the Wilson® 11.5 A2000™ Series Glove. Made with Pro Stock® leather for long-lasting performance, this glove's construction is preferred by professionals for its top-notch quality. Dri-Lex® technology in the wrist lining transfers moisture away from the skin to keep you cool and dry. The advanced design has been improved upon by the Wilson&Reg; Advisory Staff.",249.99 ));
item_list.push(new Item('baseballgear', 'Easton Baseball Helmet', 'Give your favorite player maximum protection at the plate with the Easton® Junior Z5 Elite Baseball Helmet. The ABS shell withstands impact and disperses energy away from the head, with a stylish Digi-Camo design. Featuring dual density foam liner for advanced comfort, this helmet boasts BioDri™ padded inner liner to wick moisture away from the skin to keep them cool and dry. Wrapped ear pads provide enhanced coverage around the head.', 54.99));
item_list.push(new Item('baseballgear', 'Rawlings Batting Gloves', 'Get the most out of your batting gloves this season with the Rawlings® Adult Workhorse 950 Batting Gloves. These gloves feature an Oiltac® leather palm pad to provide better grip and softness. Equipped with a Dura-Plus™ pad for added protection in the palm, the Dynamic Fit System™ provides greater comfort, flex, and feel during every play. The adjustable wrist closure is reinforced to provide a more secure fit', 34.99));

//add soccergear items
item_list.push(new Item('soccergear', 'Nike Ordem Soccer Ball', 'Hit the back of the net with the The Nike® Ordem 3 PL Soccer Ball. The Ordem 3 is the official match ball of the English Premier League for the 2015-2016 season. This FIFA® approved ball features Aerowtrac grooves and a micro-textured casing for accurate flight. The carbon latex bladder and fuse-welded construction allow for an exceptional touch while the vivid visual Power Graphics allow you to track the ball so you can react quickly.', 150.00));
item_list.push(new Item('soccergear', 'Wilson Shinguard', 'Maximize your protection for practice or game day with the Wilson® NCAA® Forte ll Soccer Shinguard. This high impact shinguard is constructed of a removable inner shell for adjustable protection to diffuse impact during elite-level play. Its Lycra® sleeve contains power band enhancements for added compression and blood circulation. Focus on your game with the Wilson® NCAA® Forte ll Soccer Shinguard.', 24.99 ));
item_list.push(new Item('soccergear', 'Adidas Goalie Gloves', 'Protect the goal line with intensity when you sport the adidas® Ace Zones Pro Soccer Goalie Gloves. Evo Zone Technology delivers superior catching and control so you can dominate the game from the net. The negative cut ensures a snug feel while seamless touch features deliver breathability through the latex and foam construction. A stretch-strap wraps your hand to complete the gloves with a comfortable fit.', 114.99));
item_list.push(new Item('soccergear', 'Storelli Exoshield Goalie Jersey', 'Block kicks to the net with maximum mobility in the Storelli® Exoshield GK Adult Goalie Gladiator Jersey. This jersey withstands impact between the posts with polyurethane foam protection at the elbows. For increased comfort, the compression material wicks moisture away to keep the skin cool and dry. Dive and defend without distraction in the lightweight Storelli® Exoshield GK Adult  Goalie Gladiator Jersey.', 64.99));
item_list.push(new Item('soccergear', 'Storelli BodyShield Slider Shorts', "Enjoy superior protection with the classic fit of the Storelli® sliders. Lightweight foam padding delivers high-performance protection to keep you safe from impact, swelling and cuts, while the unique design lets you freely move while the pads stay in place. Stay safe on the field with the antimicrobial technology and lightweight padding of the Storelli® Men's Slider Shorts.", 59.99));
item_list.push(new Item('soccergear', 'Adidas Estadio Teamp Backpack', 'Transport your gear to and from the field in style with the adidas® Estadio Team Backpack II. Built with soccer in mind, this backpack is constructed with multiple compartments to conveniently organize and store all of your gear. LoadSpring™ technology adds comfort to the shoulder straps so you can carry more equipment. FreshPAK™ shoe compartment keeps gear fresh throughout the season.', 55.00));

//add videogames
item_list.push(new Item('videogames', 'Star Wars Battlefront', 'Visit classic planets from the original Star Wars™ trilogy, detailed with an unprecedented amount of realism and sense of authenticity that will transport you to a galaxy far, far away', 59.99));
item_list.push(new Item('videogames', 'Just Cause 3', "The Mediterranean republic of Medici is suffering under the brutal control of General Di Ravello, a dictator with an insatiable appetite for power. Enter Rico Rodriguez, a man on a mission to destroy the general's ambitions by any means necessary. With more than 400 square miles of complete freedom from sky to seabed, and a huge arsenal of weaponry, gadgets and vehicles, prepare to unleash chaos in the most creative and explosive ways you can imagine.", 59.99));
item_list.push(new Item('videogames', 'Call of Duty Black Ops III', 'Call of Duty: black Ops III is the ultimate 3-games-in-1 experience. The Campaign you must navigate the hot spots of a new Cold War to find your missing brothers. Multiplayer features a new momentum-based chained movement system, allowing players to fluidly move through the environment with finesse. No Treyarch title would be complete without its signature Zombies offering "Shadows of Evil" has its own distinct storyline right out of the box.', 59.99));
item_list.push(new Item('videogames', 'Fallout 4', 'The epic storylines, adrenaline-pumping action and explosive thrills are back. The Fallout franchise returns with Fallout 4. Grab your controller and get ready to dive back into  the enveloping storyline of this legendary series.', 59.99));
item_list.push(new Item('videogames', 'Halo 5: Guardians', 'A mysterious and unstoppable force threatens the galaxy, the Master Chief is missing and his loyalty questioned. Experience the most dramatic Halo story to date in a 4-player cooperative epic that spans three worlds. Challenge friends and rivals  in new multiplayer modes: Warzone, massive 24-player battles, and Arena, pure    4-vs-4 competitive combat.*', 59.99));
 item_list.push(new Item('videogames', "Assassin's Creed Syndicate", "WELCOME TO  THE FAMILY — London, 1868. The Industrial Revolution fattens the purses of the privileged while the working class struggles to survive — until two Assassins  rise to lead the world's first organized crime family. Conquer the streets of   London. Bring the ruling class to their knees. Make history in a visceral    adventure unlike any game you've played before.", 59.99));


// display item list
 displayAll();

 //When a new category is chosen it will correct and display items of that     category type
 $('#category').on('change', function(){
  // read the selected category using 'value' attribute
  var category = $(this).val();
  if (category == '0')
    displayAll(); // display all items
  else
   displaySelectedItems(category); // display selected items

 });

 //When category is chosen, items with the same type will be displayed
 function displaySelectedItems(category){
  var itemInfo = '';
   /* display data: 
  use a for loop to go through each element in the item_list array 
 */
  for (var i=0; i<item_list.length; i++){

    // display only selected items
    if (item_list[i].type == category){
      itemInfo += createItemData(item_list[i], i); 
    }
    // add each item to the table
     $('#item-list').html(itemInfo);
  }
 }

 //Displays the item list
  function displayAll(){ 
   var itemInfo = '';
   /* display data: 
  use a for loop to go through each element in the item_list array 
   Each element is an object.  
 */
  for (var i=0; i<item_list.length; i++){

  // use each item to create HTML content
  itemInfo += createItemData(item_list[i], i); 

  // add each item to the table
  $('#item-list').html(itemInfo); 
}
}

//Creates the item's data
function createItemData(item, index){

  var trow = "<tr class='itemlist  data-index='" +index+ "' >";
      trow +=  "<td class=item-title'>"+item.title + "</td>";
      trow += "<td class='item-description'>"+item.description + "</td>";
      trow += "<td class='price'>$"+item.price + "</td>";
      trow += "<td class='adding'><button type='button' class='addme' data-    index='"+index+"'>Add</td></tr>";
  return trow;
}

//Activates "Add" button so cart can be populated
$('#item-list').on('click', '.addme', function(){ 

// 1. Read the item index using data- attribute
var index = $(this).data('index');

if(!inCart(index)){
  cart.push(index);
} 

// 3. Update the cart list and total credits
displayCartItems();
checkCart();

// update price
calculateTotalPrice();
});

//function to check if items are in cart
function inCart(index){
for (var i=0; i<cart.length; i++){
if (cart[i] == index)
  return true;
}
return false;
}

//Displays the shopping cart items
function displayCartItems(){
// create a table row for each item in cart array
var itemInfo = '';
for (var i=0; i<cart.length; i++){
  var index = cart[i];
  itemInfo += createTableRow(index);
}
$('#selected-list').html(itemInfo);
}

//Constructs the shopping cart table
function createTableRow(index){
  var trow = '';

  trow += "<tr><td>"+item_list[index].title + "</td>>";
  trow += "<td id='itemsprice'>"+item_list[index].price + "</td>";
  trow += "<td><select class='item-quantity' data-quantity='"+index+"'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option></td>";
  trow += "<td id='tc-item'>"+item_list[index].price+"</td>"
  trow += "<td><button type='button' class='delete-item' value='"+index+"'>Delete</button></td></tr>";
  return trow;
}

//When quantity is changed change the value and compute new totals
$('#selected-list').on('change', '.item-quantity', function(){

  calculateTotalPrice();

});


//If delete button is pressed in cart, the item is removed from the cart
$('#selected-list').on('click', '.delete-item', function(){
var index = $(this).val();

removeItemFromCart(index);
calculateTotalPrice();
checkCart();

});

function checkCart(){
 if(cart.length == 0){
  $('#empty-cart').html("Your cart is empty!");
} else {
  $('#empty-cart').html("");
}
}

//function to remove items from the shopping cart
function removeItemFromCart(index){
// identify and remove the index from the cart and redisplay cart table
var pos = -1;
for (var i=0; i<cart.length; i++){
  if (index == cart[i]){
    pos = i;
    break;
  }
  }
if (pos>-1){
  cart.splice(pos, 1);
  // reset the cart table
  displayCartItems();
} else {
  alert("Could not find!");
}
}

function calculateTotalPrice(){
var quantity = $('.item-quantity').val();
var subtotal = 0;
var tax = 0;
var shipping = 0;
var total = 0;

//for loop to calculate the subtotal
for(var i = 0; i < cart.length; i++){
  var productPrice = item_list[cart[i]].price;
  subtotal += productPrice * quantity; 
  }

//Percent taxed is 6%
var taxPerc = .06;

//Calculating taxes
tax = subtotal * taxPerc;

//Percent for shipping is 2%
var shippingPerc = .02;

//Calculating shipping
shipping = subtotal * shippingPerc;

//Calculating total
total = subtotal + tax + shipping;

//Displaying totals
//$('#tc-item').html(totalItemPrice.toFixed(2));
$('#subtotal').html(subtotal.toFixed(2));
$('#tax').html(tax.toFixed(2));
$('#shipping').html(shipping.toFixed(2));
$('#total').html(total.toFixed(2));
}

//Activates the Display cart and Hide cart buttons in shopping cart
$('#show-cart').on('click', function(){
$('#selected-list').show();
});
$('#hide-cart').on('click', function(){
$('#selected-list').hide();
    });

    });
</script>
</head>
<body>
<div class='container'>
  <div class='row' id='top-box' >
  <div class='col-sm-12'>
    <h2>Sam's Discount Store</h2>
    <h3>Variety of Items!</h3>
  </div>
  </div>

  <div class='row' id='content'>
  <div class='col-sm-8'>
    <h3 class='title'>Discounted Items</h3>
    <h4>
      <select id='category'>
      <option value='0' >All</option>
      <option value='baseballgear' >Baseball Items</option>
      <option value='soccergear' >Soccer Items</option>
      <option value='videogames'>Video Games</option>
     </select>
    </h4>
    <table class='table table-bordered clmlabels' >
        <tr class='t-head'><td >Product</td>
          <td >Description</td>
          <td >Cost</td>
        </tr>
      <tbody id='item-list'>
      </tbody>


    </table>
  </div>
  <div class='col-sm-4'>
    <h2>Cart Items</h2>

 <p><button class='btn btn-primary' id='show-cart'>Display cart</button>
   <button class='btn' id='hide-cart'>Hide cart</button></p>
    <table class='table selected-list' id='selected-list'>
   </table>
  </div>
  <table class='cart-table'>
    <tr>
      <td id='empty-cart'></td>
    <tr>
     <td>Subtotal:  </td>
      <td><span id='subtotal'>0</td>
    </tr>
    <tr>
      <td>Tax:  </td>
      <td><span id='tax'>0</td>
    </tr>
    <tr>
      <td>Shipping:  </td>
     <td><span id='shipping'>0</td>
    </tr>
     <tr>
      <td>Total:  </td>
      <td><span id='total'>0</td>
    </tr>
  </table>

</div>
   </div>
   <div class='row' id='footer'
   <div class='col-sm-12'> <p>Sam's Discount Store</p></div>
   </div>
</div>
</body>
</html>

cart.push({"index": index, "qty": 1});