javascript - 无法使用添加商品将商品添加到购物车

Question

当我点击“添加”时，无法将商品添加到购物车。我认为我在尝试使用“添加”按钮时可能做错了什么，无论是 .on() 事件方法(我将选定的汽车索引插入购物车数组，然后使用函数 addQty 和 updateShoppingCart)或当我尝试删除 hide 类时。还是我做错了什么？

//step-1: add jQuery ready method to hold entire js code in this script 
$(document).ready(function(){

// Define a car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, car_price, car_mileage) {
	this.stockid = id;
	this.make = car_make;
	this.model = car_model;
	this.year = car_year;
	this.type = car_type;
	this.color = car_color;
	this.price = car_price;
	this.mileage = car_mileage;
	this.qty = 0; 
	this.display = function(){
		var this_str = "<td>" + this.stockid + "</td><td>" + this.make + "</td>";
		this_str += "<td>" + this.model + "</td><td>" + this.year + "</td><td>" + this.type + "</td>";
		this_str += "<td>" + this.color + "</td><td>$" + this.price + "</td>";
		this_str += "<td>" + this.mileage + "</td>";
		
		return this_str;
	}
}

// Declare an array of objects
var car_list = [];  // var car_list = new Array();

// Create an instance of the Car object and add it to the car_list array
car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 17555, 55060));
car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 15575, 20350));
car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 15775, 70000));
car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "SUV", "Red", 104250, 10567));
car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 13370, 35000));
car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", "Silver", 18555, 55060));
car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 13575, 90350));
car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 25775, 70000));
car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 30250, 17567));
car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 3500));
car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 354370, 5500));
car_list.push(new Car(4002, "Audi", "R8", 2012, "SUV", "Black", 181370, 4500));


//Step-2 (a): call displayDropdown() function to set up the drop down selection list
displayDropdown();

//Step-2 (d): use jQuery event method .on() to add an event handler to the drop down list
//so that when users change selection option based on car type, 
//then only that type of cars will be displayed in the car list table in the web page.
$('#car-category').on('change', function(){
	var cat = $(this).val();
	console.log(cat);
	displayListing(cat);
} );


/*****************************/
/* displayDropdown()         */
/*****************************/ 
function displayDropdown(){
	var currentCat = 'select';
	var output = "<option value=\'"+ currentCat + "\'>Select a category to display</option>";
	var addedCats = [];

//Step-3 (a): add script code here to add options to the drop down list
	for(var i = 0; i < car_list.length; i++) {
		currentCat = car_list[i].type;
		//check whether the car's type has been included in the drop down list, if not, then add that category to the list
		//Array.indexOf(currentItem) is used to check whether currentItem is in the array, if not, then -1 will be returned.
		if (addedCats.indexOf(currentCat)==-1) { //did not find currentCat in addedCats array
			addedCats.push(currentCat); //add currentCat to addedCats array, and then create
			//an <option> element for that category
			output += "<option value='" + currentCat + "'  class='cat-select'>" + currentCat + "</option>";
//console.log("added " + currentCat);
		} 
//console.log(addedCats);
	} // end for loop
	//add one more category as an <option> element which is used to display all products	
	currentCat = "All";
	output += "<option value='" + currentCat + "'  class='cat-select'>" + currentCat + "</option>";
// output is a string used to hold all new <option> elements	
	$('#car-category').html(output);

 }
 
/*****************************/
/* displayListing()          */
/*****************************/  
 function displayListing(cat){
	//Step-2 (b): Add jQuery code in this function to remove class "hide" from car list table.  
	$('#car-list').removeClass('hide');
	var displayAll = false;
	if (cat == "All") {
		displayAll = true;
	} 
	if (cat == "select") {
	  $('#car-list tbody').html("");
	}
	var body="";
	
   //add table body	
   //step-2 (c):add js code to complete the for loop and if statement  to display car list in the web page according to 
   //users’ selection on car type
   for(var i = 0; i < car_list.length; i++) {
		if(car_list[i].type == cat || displayAll == true) {
			console.log("add table list: " + cat);
			body += "<tr class='car-item' id='l-"+ i + "'>";		
			body += car_list[i].display();
			body += "<td><button type='button' value='" + 
			i + "' class='btn btn-primary add-item'>Add</button></td>";		
			body += "</tr>";
		}
	}
	$('#car-list tbody').html(body);
 }

//define an array (global variable) to store indices of the items added to the shopping cart*/
 var cart = [];
 

//Step-3 (a): Apply jQuery event delegation technique to add event handler so that when users click Add buttons, 
//the selected cars will be added to the shopping cart without any duplication, 
//the selected cars’ information including stockid, make, model, price, quantity and type will be displayed 
//in the shopping cart list on the web page, the number of items in the shopping cart as well as the Checkout 
//invoice information including subtotal, tax, registration fee, and total amount will be updated.
 $('#car_list').on('click', '.add-item', function(){
							var index = $(this).val(); 
							if (cart.indexOf(index)== -1)
							{  cart.push(index); 
//console.log("Cart array is currently: " + cart);
							}
							addQty(index); 
							updateShoppingCart();} );
/****************/
/* addQty()     */
/****************/
function addQty(index) {
	car_list[index].qty++;
}


/*****************************/
/* updateShoppingCart()      */
/*****************************/
 function updateShoppingCart(){
//step 3(b): Add jQuery code in this function to remove class "hide" from shopping cart table, 
//and also from check out table. 
	console.log("Cart array is currently: " + cart);	
    $('#cart table').removeClass('hide');
	$('#checkout table').removeClass('hide');
 
//console.log("Cart array is currently: " + cart);
	//display shopping cart	
	displayCartItems();

	// update total items
	updateItemTotal();

	//Update final checkout data
	calculateCheckoutCost();

 }
 
 /**************************/
/* displayCartItems()     */
/**************************/
function displayCartItems(){
	/* use this method to display items in the shopping cart.
	This method should  redisplay the 'shopping cart'
	table when we add or delete items.*/
	// add each product to shopping cart
	var runError = true;
	var elm='';
	for (var i=0; i<cart.length; i++){
			//create a table row and add stockId, make, cost, quantity, and type info of the selected cars to the cart table
			elm += "<tr><td class=\'col-xs-1\'>"+ car_list[cart[i]].stockid + "</td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].make + "</td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].model + "</td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].price + "</td>";
			elm += "<td class=\'col-xs-1\'><input  type=\'text\' id=\'" + cart[i] + "\' name=\'qty-" + i +
			"\' size=\'1\' value=\'"+ car_list[cart[i]].qty + "\'></td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].type + "</td>";
			elm += "<td class=\'col-xs-1\'><button type=\'button\' value=\'" + i + "\' class=\'delete-item\'>Delete</button></td></tr>";
			runError = false; // = cart is not empty
	}
	if (runError) { //if cart is empty
		elm += "Your cart is empty.";
	}
	//step 3(d): add a jQuery selector 
//console.log(elm);	
	$('#mycart tbody').html(elm); // modify the table
}


/*****************************/
/* updateItemTotal()         */
/*****************************/
 function updateItemTotal(){
	// update the total items
	var total = cart.length;
	$('#items').text(total);
 } 

/*******************************/
/* calculateCheckoutCost()     */
/*******************************/
function calculateCheckoutCost(){

	//Display total number of cars in the cart 
	var taxRate = 0.06;
	var feeRate = 0.05;
	var subtotal = 0;
	var tax = 0;
	var fee = 0;
	var total = 0;
	
	//Calculate subtotal 
	var subtotal = 0;
	//step 6: add js code here to calculat subtotal, tax, fee, and total amount
	//display those information to web page by using jQuery selector, jQuery .text() method.
		for (var i=0; i<cart.length; i++){
		subtotal += parseFloat(car_list[cart[i]].car_price * car_list[cart[i]].qty);
	}
	tax = subtotal * taxRate;
	fee = subtotal * feeRate;
	fee = subtotal + tax + fee;
	
}
//Step-4: Apply jQuery event delegation technique to add event handler so that when users click Delete buttons 
//the selected cars will be removed from the shopping cart and removed from the shopping cart list in the web page as well. 
//Meanwhile, the number of items in the shopping cart as well as the Checkout invoice information including subtotal, tax, 
//registration fee, and total amount will be updated.
$('#item-list').on('click', '.delete-item', function(){
					var index = $(this).val();
//console.log("Delete Item: " + index);
					deleteItemFromCart(index);
				    updateShoppingCart();
					});




/*****************************/
/* deleteItemFromCart()      */
/*****************************/
 function deleteItemFromCart(index){
	/*  remove the element with a given index from the cart array and update shopping cart
	 use splice() method, Syntax: array_name.splice(start, how many elements)
	The splice() method removes elements starting from 'start' positions. The second arguments defines the number of elements to be removed.
	*/
   //step 3(f): add script to update the ordering quantity of selected car and use splice method to 
   //remove that selected car from the shopping cart.
    car_list[cart[index]].qty = 0;
	cart.splice(index, 1);
}

//Step-5: Apply jQuery event delegation technique to add event handler so that when users change the ordering 
//quantities of selected cars in the shopping list in the web page, 
//the ordering quantities of selected cars the Checkout invoice information including subtotal, tax, registration fee,
// and total amount will be updated. 
$('#item-list').on('change', 'input',  function (){ 
					updateCartItemQty(this);
				    updateShoppingCart();
				  });




/*****************************/
/* updateCartItemQty()       */
/*****************************/
 function updateCartItemQty(input) {
	var value = 0;
	value = parseInt($("#" + input.id).val());

	var index = parseInt(input.id); 
	car_list[index].qty = value;
	
 }

 


 
});

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auto Shop - Used Cars</title>
    <!--Include bootstrap CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	
	<!-- Include JQuery library -->	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 
	<!-- Include external js file (JQuery_auto_shop.js) here -->
<script src="JQuery_auto_shop.js"></script>

	<style>
		 td{ padding: 5px; margin: 5px;}
		.addme { height: 28px; width: 80px; padding: 0; }
		.clm-label { background: #333; color: #fff;}
		.hide {display: none}	
	</style>
	
</head>
<body class='container'>
	<div class='col-md-9' >
    <h2>Choose a car type </h2> <!--drop down list -->
	<select id="car-category" name="car-category">
		<option value='null'>Loading....</option>
	</select>
	</div>
	<div class='col-md-9'>
	   <h2>Car List</h2> <!-- car list -->
		<table class='table hide' id='car-list'>
		<thead><!--car list table header -->
		<tr class='clm-label'> 
		   <th class='clm-label'>Stock ID</th>
		   <th class='clm-label'>Make</th>
		   <th class='clm-label'>Model</th>
		   <th class='clm-label'>Year</th>
		   <th class='clm-label'>Type</th>
		   <th class='clm-label'>Color</th>
		   <th class='clm-label'>Price</th>
		   <th class='clm-label'>Mileage</th>
		   <th class='clm-label'>Select</th>
		 </tr>  
		 </thead>
		 <tbody id='car-list'><!--car list table body -->
		 </tbody>
		</table>
	</div>
	<div class='col-md-3' id="cart">
		<h2>Shopping Cart</h2>
		<div>You have <span id="items">0</span>  items in your Shopping Cart</div>
		<table class='table hide' id='mycart'><!--Shopping Cart list table -->
		<thead><!--table header -->
			<tr>
				<th class='clm-label'>Stock Id</th>
				<th class='clm-label'>Make</th>
				<th class='clm-label'>Model</th>
				<th class='clm-label'>Price</th>
				<th class='clm-label'>Quantity</th>
				<th class='clm-label'>Type</th>
				<th class='clm-label'></th>
			</tr>
		</thead>
		<tbody><!--table body -->
		</tbody id='item-list'>
		</table>
	</div>
</div>

<div class='col-md-9' id="checkout">
    <h2>Check Out</h2>
	<table class='table hide' ><!--Check Out table -->
		<tr><th class='col-xs-4'>Subtotal: </th><td class='col-xs-2' id='sub-total'>0</td></tr>
		<tr><th class='col-xs-4'>Taxes (6%): </th><td class='col-xs-2' id='taxes'>0</td></tr>
		<tr><th class='col-xs-4'>Registration fee (5%): </th><td class='col-xs-2' id='registration'>0</td></tr>
		<tr><th class='col-xs-4'>Total due: </th><td class='col-xs-2' id='total'>0</td></tr>
	</table>
</div>

</body>
</html>

Answer 1

我认为可能存在拼写错误，请尝试将 $('#car_list').on('click', '.add-item', 替换为 < strong>$('#car-list').on('click', '.add-item', 并且您应该能够将商品添加到购物车。

但是添加到购物车后，您将无法通过单击删除按钮将其从购物车中删除。再次将 $('#item-list').on('click', '.delete-item', 替换为 $(' #mycart').on('点击', '.delete-item',

//step-1: add jQuery ready method to hold entire js code in this script 
$(document).ready(function(){

// Define a car object using a constructor function
function Car(id, car_make, car_model, car_year, car_type, car_color, car_price, car_mileage) {
	this.stockid = id;
	this.make = car_make;
	this.model = car_model;
	this.year = car_year;
	this.type = car_type;
	this.color = car_color;
	this.price = car_price;
	this.mileage = car_mileage;
	this.qty = 0; 
	this.display = function(){
		var this_str = "<td>" + this.stockid + "</td><td>" + this.make + "</td>";
		this_str += "<td>" + this.model + "</td><td>" + this.year + "</td><td>" + this.type + "</td>";
		this_str += "<td>" + this.color + "</td><td>$" + this.price + "</td>";
		this_str += "<td>" + this.mileage + "</td>";
		
		return this_str;
	}
}

// Declare an array of objects
var car_list = [];  // var car_list = new Array();

// Create an instance of the Car object and add it to the car_list array
car_list.push(new Car(1001, "Toyota", "Camry", 2011, "Sedan", "Gray", 17555, 55060));
car_list.push(new Car(1002, "Volvo", "s40", 2013, "Sedan", "Black", 15575, 20350));
car_list.push(new Car(1251, "Toyota", "Sienna", 2008, "Minivan", "Gray", 15775, 70000));
car_list.push(new Car(1321, "Porsche", "Panamera", 2012, "SUV", "Red", 104250, 10567));
car_list.push(new Car(1904, "Honda", "Accord", 2009, "Sedan", "White", 13370, 35000));
car_list.push(new Car(1855, "Toyota", "Highlander", 2008, "SUV", "Silver", 18555, 55060));
car_list.push(new Car(1543, "Ford", "Fusion", 2011, "Sedan", "Black", 13575, 90350));
car_list.push(new Car(1345, "Toyota", "Sienna", 2011, "Minivan", "Gray", 25775, 70000));
car_list.push(new Car(2133, "Dodge", "Caravan", 2012, "Minivan", "Red", 30250, 17567));
car_list.push(new Car(2999, "Lexus", "LFA", 2012, "coupe", "Red", 381370, 3500));
car_list.push(new Car(3001, "Ferrari", "Rubino", 2012, "coupe", "Red", 354370, 5500));
car_list.push(new Car(4002, "Audi", "R8", 2012, "SUV", "Black", 181370, 4500));


//Step-2 (a): call displayDropdown() function to set up the drop down selection list
displayDropdown();

//Step-2 (d): use jQuery event method .on() to add an event handler to the drop down list
//so that when users change selection option based on car type, 
//then only that type of cars will be displayed in the car list table in the web page.
$('#car-category').on('change', function(){
	var cat = $(this).val();
	console.log(cat);
	displayListing(cat);
} );


/*****************************/
/* displayDropdown()         */
/*****************************/ 
function displayDropdown(){
	var currentCat = 'select';
	var output = "<option value=\'"+ currentCat + "\'>Select a category to display</option>";
	var addedCats = [];

//Step-3 (a): add script code here to add options to the drop down list
	for(var i = 0; i < car_list.length; i++) {
		currentCat = car_list[i].type;
		//check whether the car's type has been included in the drop down list, if not, then add that category to the list
		//Array.indexOf(currentItem) is used to check whether currentItem is in the array, if not, then -1 will be returned.
		if (addedCats.indexOf(currentCat)==-1) { //did not find currentCat in addedCats array
			addedCats.push(currentCat); //add currentCat to addedCats array, and then create
			//an <option> element for that category
			output += "<option value='" + currentCat + "'  class='cat-select'>" + currentCat + "</option>";
//console.log("added " + currentCat);
		} 
//console.log(addedCats);
	} // end for loop
	//add one more category as an <option> element which is used to display all products	
	currentCat = "All";
	output += "<option value='" + currentCat + "'  class='cat-select'>" + currentCat + "</option>";
// output is a string used to hold all new <option> elements	
	$('#car-category').html(output);

 }
 
/*****************************/
/* displayListing()          */
/*****************************/  
 function displayListing(cat){
	//Step-2 (b): Add jQuery code in this function to remove class "hide" from car list table.  
	$('#car-list').removeClass('hide');
	var displayAll = false;
	if (cat == "All") {
		displayAll = true;
	} 
	if (cat == "select") {
	  $('#car-list tbody').html("");
	}
	var body="";
	
   //add table body	
   //step-2 (c):add js code to complete the for loop and if statement  to display car list in the web page according to 
   //users’ selection on car type
   for(var i = 0; i < car_list.length; i++) {
		if(car_list[i].type == cat || displayAll == true) {
			console.log("add table list: " + cat);
			body += "<tr class='car-item' id='l-"+ i + "'>";		
			body += car_list[i].display();
			body += "<td><button type='button' value='" + 
			i + "' class='btn btn-primary add-item'>Add</button></td>";		
			body += "</tr>";
		}
	}
	$('#car-list tbody').html(body);
 }

//define an array (global variable) to store indices of the items added to the shopping cart*/
 var cart = [];
 

//Step-3 (a): Apply jQuery event delegation technique to add event handler so that when users click Add buttons, 
//the selected cars will be added to the shopping cart without any duplication, 
//the selected cars’ information including stockid, make, model, price, quantity and type will be displayed 
//in the shopping cart list on the web page, the number of items in the shopping cart as well as the Checkout 
//invoice information including subtotal, tax, registration fee, and total amount will be updated.
 $('#car-list').on('click', '.add-item', function(){
							var index = $(this).val(); 
							if (cart.indexOf(index)== -1)
							{  cart.push(index); 
//console.log("Cart array is currently: " + cart);
							}
							addQty(index); 
							updateShoppingCart();} );
/****************/
/* addQty()     */
/****************/
function addQty(index) {
	car_list[index].qty++;
}


/*****************************/
/* updateShoppingCart()      */
/*****************************/
 function updateShoppingCart(){
//step 3(b): Add jQuery code in this function to remove class "hide" from shopping cart table, 
//and also from check out table. 
	console.log("Cart array is currently: " + cart);	
    $('#cart table').removeClass('hide');
	$('#checkout table').removeClass('hide');
 
//console.log("Cart array is currently: " + cart);
	//display shopping cart	
	displayCartItems();

	// update total items
	updateItemTotal();

	//Update final checkout data
	calculateCheckoutCost();

 }
 
 /**************************/
/* displayCartItems()     */
/**************************/
function displayCartItems(){
	/* use this method to display items in the shopping cart.
	This method should  redisplay the 'shopping cart'
	table when we add or delete items.*/
	// add each product to shopping cart
	var runError = true;
	var elm='';
	for (var i=0; i<cart.length; i++){
			//create a table row and add stockId, make, cost, quantity, and type info of the selected cars to the cart table
			elm += "<tr><td class=\'col-xs-1\'>"+ car_list[cart[i]].stockid + "</td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].make + "</td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].model + "</td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].price + "</td>";
			elm += "<td class=\'col-xs-1\'><input  type=\'text\' id=\'" + cart[i] + "\' name=\'qty-" + i +
			"\' size=\'1\' value=\'"+ car_list[cart[i]].qty + "\'></td>";
			elm += "<td class=\'col-xs-1\'>"+ car_list[cart[i]].type + "</td>";
			elm += "<td class=\'col-xs-1\'><button type=\'button\' value=\'" + i + "\' class=\'delete-item\'>Delete</button></td></tr>";
			runError = false; // = cart is not empty
	}
	if (runError) { //if cart is empty
		elm += "Your cart is empty.";
	}
	//step 3(d): add a jQuery selector 
//console.log(elm);	
	$('#mycart tbody').html(elm); // modify the table
}


/*****************************/
/* updateItemTotal()         */
/*****************************/
 function updateItemTotal(){
	// update the total items
	var total = cart.length;
	$('#items').text(total);
 } 

/*******************************/
/* calculateCheckoutCost()     */
/*******************************/
function calculateCheckoutCost(){

	//Display total number of cars in the cart 
	var taxRate = 0.06;
	var feeRate = 0.05;
	var subtotal = 0;
	var tax = 0;
	var fee = 0;
	var total = 0;
	
	//Calculate subtotal 
	var subtotal = 0;
	//step 6: add js code here to calculat subtotal, tax, fee, and total amount
	//display those information to web page by using jQuery selector, jQuery .text() method.
		for (var i=0; i<cart.length; i++){
		subtotal += parseFloat(car_list[cart[i]].car_price * car_list[cart[i]].qty);
	}
	tax = subtotal * taxRate;
	fee = subtotal * feeRate;
	fee = subtotal + tax + fee;
	
}
//Step-4: Apply jQuery event delegation technique to add event handler so that when users click Delete buttons 
//the selected cars will be removed from the shopping cart and removed from the shopping cart list in the web page as well. 
//Meanwhile, the number of items in the shopping cart as well as the Checkout invoice information including subtotal, tax, 
//registration fee, and total amount will be updated.
$('#mycart').on('click', '.delete-item', function(){
					var index = $(this).val();
//console.log("Delete Item: " + index);
					deleteItemFromCart(index);
				    updateShoppingCart();
					});




/*****************************/
/* deleteItemFromCart()      */
/*****************************/
 function deleteItemFromCart(index){
	/*  remove the element with a given index from the cart array and update shopping cart
	 use splice() method, Syntax: array_name.splice(start, how many elements)
	The splice() method removes elements starting from 'start' positions. The second arguments defines the number of elements to be removed.
	*/
   //step 3(f): add script to update the ordering quantity of selected car and use splice method to 
   //remove that selected car from the shopping cart.
    car_list[cart[index]].qty = 0;
	cart.splice(index, 1);
}

//Step-5: Apply jQuery event delegation technique to add event handler so that when users change the ordering 
//quantities of selected cars in the shopping list in the web page, 
//the ordering quantities of selected cars the Checkout invoice information including subtotal, tax, registration fee,
// and total amount will be updated. 
$('#item-list').on('change', 'input',  function (){ 
					updateCartItemQty(this);
				    updateShoppingCart();
				  });




/*****************************/
/* updateCartItemQty()       */
/*****************************/
 function updateCartItemQty(input) {
	var value = 0;
	value = parseInt($("#" + input.id).val());

	var index = parseInt(input.id); 
	car_list[index].qty = value;
	
 }

 


 
});

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Auto Shop - Used Cars</title>
    <!--Include bootstrap CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	
	<!-- Include JQuery library -->	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 
	<!-- Include external js file (JQuery_auto_shop.js) here -->
<script src="JQuery_auto_shop.js"></script>

	<style>
		 td{ padding: 5px; margin: 5px;}
		.addme { height: 28px; width: 80px; padding: 0; }
		.clm-label { background: #333; color: #fff;}
		.hide {display: none}	
	</style>
	
</head>
<body class='container'>
	<div class='col-md-9' >
    <h2>Choose a car type </h2> <!--drop down list -->
	<select id="car-category" name="car-category">
		<option value='null'>Loading....</option>
	</select>
	</div>
	<div class='col-md-9'>
	   <h2>Car List</h2> <!-- car list -->
		<table class='table hide' id='car-list'>
		<thead><!--car list table header -->
		<tr class='clm-label'> 
		   <th class='clm-label'>Stock ID</th>
		   <th class='clm-label'>Make</th>
		   <th class='clm-label'>Model</th>
		   <th class='clm-label'>Year</th>
		   <th class='clm-label'>Type</th>
		   <th class='clm-label'>Color</th>
		   <th class='clm-label'>Price</th>
		   <th class='clm-label'>Mileage</th>
		   <th class='clm-label'>Select</th>
		 </tr>  
		 </thead>
		 <tbody id='car-list'><!--car list table body -->
		 </tbody>
		</table>
	</div>
	<div class='col-md-3' id="cart">
		<h2>Shopping Cart</h2>
		<div>You have <span id="items">0</span>  items in your Shopping Cart</div>
		<table class='table hide' id='mycart'><!--Shopping Cart list table -->
		<thead><!--table header -->
			<tr>
				<th class='clm-label'>Stock Id</th>
				<th class='clm-label'>Make</th>
				<th class='clm-label'>Model</th>
				<th class='clm-label'>Price</th>
				<th class='clm-label'>Quantity</th>
				<th class='clm-label'>Type</th>
				<th class='clm-label'></th>
			</tr>
		</thead>
		<tbody><!--table body -->
		</tbody id='item-list'>
		</table>
	</div>
</div>

<div class='col-md-9' id="checkout">
    <h2>Check Out</h2>
	<table class='table hide' ><!--Check Out table -->
		<tr><th class='col-xs-4'>Subtotal: </th><td class='col-xs-2' id='sub-total'>0</td></tr>
		<tr><th class='col-xs-4'>Taxes (6%): </th><td class='col-xs-2' id='taxes'>0</td></tr>
		<tr><th class='col-xs-4'>Registration fee (5%): </th><td class='col-xs-2' id='registration'>0</td></tr>
		<tr><th class='col-xs-4'>Total due: </th><td class='col-xs-2' id='total'>0</td></tr>
	</table>
</div>

</body>
</html>