...

View Full Version : Help with Tables??



HiEverybody
07-13-2004, 01:32 AM
Goodevening

I want every item that is added to the shopping cart to display in a separate row. Currently all the items added to the shopping cart displays in one row.

The "remove item from cart" must also display next to each item so that individual items can be removed and the items that is not removed must still display in the table. Currently all the items is removed when i click on "remove item from cart"

Here is my code that displays items in my shopping cart:



<html>
<head>
<title>JavaScript Cookies - Shopping Cart</title>

<script language="JavaScript">
var item_name = new Array();
item_name[0] = "T-Shirt - Small";
item_name[1] = "T-Shirt - Medium";
item_name[2] = "T-Shirt - Large";
item_name[3] = "Lime Green Cap";
item_name[4] = "Orange Cap";
item_name[5] = "Teddy Bear";

var item_price = new Array();
item_price[0] = 29.50;
item_price[1] = 34.50;
item_price[2] = 39.50;
item_price[3] = 18.75;
item_price[4] = 18.75;
item_price[5] = 66.50;



var item_number = new Array();

if (document.cookie && document.cookie != ""){process_cookie()}

function process_cookie(){
var whole_cookie = unescape(document.cookie);
var drop_name = whole_cookie.split("=");
if (drop_name[1] != ""){
item_number = drop_name[1].split("xxx");
}//ends IF
}//ends process_cookie() function

function kill_cookies(){
var kill_date = new Date("January 1, 1970");
document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
}//ends kill_cookie() function

function remove(){
var new_cookie_raw_data = "drop this";

if (document){
for (i = 0; i < document.length; i++){
if (document[i].checked == true){
new_cookie_raw_data = new_cookie_raw_data + document[i].value + "xxx";
}//ends IF
}//ends FOR
}//ends testing IF

var drop_initialization = new_cookie_raw_data.split("drop this");

if (drop_initialization[1] == ""){
kill_cookies()
}//ends IF

if (drop_initialization[1] != ""){
var clean_data = drop_initialization[1];
document.cookie = "stuff=" + escape(clean_data);
}//end IF

window.location = "cart.html";
}//ends remove() function


</script>

</head>

<body>
<h1 align="center">Easy Credit Shopping Cart</h1>
<p>&nbsp;</p>

<hr>




<div align="center"><table width="70%" border="1">
<tr>
<td><script language="JavaScript">

var total = 0;

for (i = 0; i < item_number.length - 1; i++){

document.write("" + item_name[item_number[i]] + "<br>");

}

</script></td>

<td><script language="JavaScript">

var total = 0;

for (i = 0; i < item_number.length - 1; i++){

document.write("" + item_price[item_number[i]] + "<br>");

}

</script></td>


<td align="left" valign="middle"><a href="Cart.html" onclick = "remove()">Remove
from cart</a><br>
</td>
</tr>
<tr>
<td>Total:</td>
<td><script language="JavaScript">

var total = 0;

for (i = 0; i < item_number.length - 1; i++){

total = total + item_price[item_number[i]];
}//ends FOR

//Total
document.write("R" + total + "");

</script></td>

<td>&nbsp;</td>
</tr>
</table>
</div>





<div align="center">
<p>&nbsp;</p>
<p><a href="Home.html">Return to Order Page</a></p>
<p><a href="Order.html">Display Printable Order Form</a><br>
<br>
</p>
</div>
</body>
</html>

dumpfi
07-13-2004, 03:42 AM
I hope this works, although i can't test it because i don't have the needed cookie. (wanna have cookies :D)

<html>
<head>
<title>JavaScript Cookies - Shopping Cart</title>
<script type="text/javascript">
var item_name = [];
item_name[0] = "T-Shirt - Small";
item_name[1] = "T-Shirt - Medium";
item_name[2] = "T-Shirt - Large";
item_name[3] = "Lime Green Cap";
item_name[4] = "Orange Cap";
item_name[5] = "Teddy Bear";

var item_price = [];
item_price[0] = 29.50;
item_price[1] = 34.50;
item_price[2] = 39.50;
item_price[3] = 18.75;
item_price[4] = 18.75;
item_price[5] = 66.50;

var item_number = [];

if(document.cookie) process_cookie()

function process_cookie() {
var whole_cookie = unescape(document.cookie);
var drop_name = whole_cookie.split("=");
if(drop_name[1]) item_number = drop_name[1].split("xxx");
}

function kill_cookies() {
var kill_date = new Date("January 1, 1970");
document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
}

function remove(which) {
item_number.splice(which, 1);
if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx");
else kill_cookies();
fill_table();
}

function fill_table() {
var parent_el = document.getElementById("cart");
for(var i = 0; i < parent_el.childNodes.length; i++) {
parent_el.removeChild(parent_el.childNodes[i]);
}
var price_total = 0;
for(var i = 0; i < item_number.length; i++) {
var row = document.createElement("tr");
var name = document.createElement("td");
name.appendChild(document.createTextNode(item_name[item_number[i]]));
var price = document.createElement("td");
price.appendChild(document.createTextNode(item_price[item_number[i]]));
var remove = document.createElement("td");
var del_link = document.createElement("a");
del_link.appendChild(document.createTextNode("Remove from cart"));
del_link.setAttribute("href", "javascript:remove(" + i + ")");
remove.appendChild(del_link);
row.appendChild(name);
row.appendChild(price);
row.appendChild(remove);
parent_el.appendChild(row);
price_total += item_price[item_number[i]];
}
if(i) {
var row = document.createElement("tr");
total_msg = document.createElement("td");
total_msg.appendChild(document.createTextNode("Total:"));
total_price = document.createElement("td");
total_price.appendChild(document.createTextNode("R" + price_total));
total.appendChild(total_msg);
total.appendChild(total_price);
total.appendChild(document.createElement("td"));
parent_el.appendChild(total);
}
else {
var row = document.createElement("tr");
var no_items = document.createElement("td");
no_items.appendChild(document.createTextNode("No items in cart"));
row.appendChild(no_items);
parent_el.appendChild(row);
}
}
window.onload = fill_table;
</script>
</head>
<body>
<h1 align="center">Easy Credit Shopping Cart</h1>
<p>&nbsp;</p>
<hr>
<div align="center"><table width="70%" border="1">
<table id="cart">
</table>
</div>
<div align="center">
<p>&nbsp;</p>
<p><a href="Home.html">Return to Order Page</a></p>
<p><a href="Order.html">Display Printable Order Form</a><br><br></p>
</div>
</body>
</html>
Edit: Removes and rewrites table content now instead of reloading the page

HiEverybody
07-13-2004, 10:31 AM
Thank You Dumpfi!!!!!!

I will try your code an then I will see if it works. If it does not work I will spost the code for the cookie as you requested!!

Cheers

HiEverybody
07-13-2004, 11:01 AM
Hi Dumpfi


Everything works fine on the code below.
It is the cookies that you asked so you can test my code





<html>
<head>
<title>Easy Credit Online Shopping</title>

<script language="JavaScript">
function place(new_item){
//process old cookie
if (document.cookie && document.cookie != ""){
var old_cookie = document.cookie;
document.cookie = old_cookie + escape(new_item + "xxx");
}//ends old cookie IF

else{
document.cookie = "stuff=" + escape(new_item + "xxx");
}//ends ELSE
}//ends function


function Message1()
{
alert("T-Shirt - Small has been added to your shopping cart.");
}

function Message2()
{
alert("T-Shirt - Medium has been added to your shopping cart.");
}

function Message3()
{
alert("T-Shirt - Large has been added to your shopping cart.");
}

function Message4()
{
alert("Lime Green Cap has been added to your shopping cart.");
}

function Message5()
{
alert("Orange Cap has been added to your shopping cart.");
}

function Message6()
{
alert(" Teddy Bear has been added to your shopping cart.");
}

function Keypressed(keyCode)
{
if (keyCode==86)
{
window.location = "cart.html";
}
}

</script>


</head>

<body bgcolor="lightgrey">
<div align="center">
<p><font size="5"><b>Welcome to the Easy Credit Online Shopping Site</b></font>
</p>
<p>&nbsp;</p>
</div>
<hr>

<p align="center">Press 'V' to view your Shopping cart or click <a href="cart.html" onkeydown = "Keypressed(event.keyCode)">here</a></p>

<table bgcolor = "white" width="70%" border="1" align = "center">
<tr>
<td width="22%" height="10">T-Shirt</td>
<td width="70%" height="10" align="left">
<p align="left">Lime Green T-Shirt with Orange Easy Credit Logo - Small</p>
<p ><a href="javascript:place(0)" onclick = "Message1()" align="left">Add to Shopping Cart</a></p>
</td>
<td width="8%" height="10">R29.50</td>
</tr>
<tr>
<td width="22%" height="10">T-Shirt</td>
<td width="70%" height="10" align="left">
<p align="left">Lime Green T-Shirt with Orange Easy Credit Logo -Medium</p>
<p ><a href="javascript:place(1)" onclick = "Message2()" align="left">Add to Shopping Cart</a></p>
</td>
<td width="8%" height="10">R34.50</td>
</tr>
<tr>
<td width="22%" height="10">T-Shirt</td>
<td width="70%" align="left" height="10">
<p align="left">Lime Green T-Shirt with Orange Easy Credit Logo - Large</p>
<p ><a href="javascript:place(2)" onclick = "Message3()" align="left">Add to Shopping Cart</a></p>
</td>
<td width="8%" height="10">R39.50</td>
</tr>
<tr>
<td width="22%" height="10">Cap</td>
<td width="70%" align="left" height="10">
<p align="left">Adjustable Lime Green Cap with Orange Easy Credit Logo</p>
<p ><a href="javascript:place(3)" onclick = "Message4()" align="left">Add to Shopping Cart</a></p>
</td>
<td width="8%" height="10">R18.75</td>
</tr>
<tr>
<td width="22%" height="10">Cap</td>
<td width="70%" align="left" height="10">
<p align="left">Adjustable Orange Cap with Lime Green Cap Easy Credit Logo</p>
<p ><a href="javascript:place(4)" onclick = "Message5()" align="left">Add to Shopping Cart</a></p>
</td>
<td width="8%" height="10">R18.75</td>
</tr>
<tr>
<td width="22%" height="10">Easy Credit Teddy Bear</td>
<td width="70%" align="left" height="10">
<p align="left">25cm Tall Lime Green Teddy Bear with Orange T-shirt</p>
<p ><a href="javascript:place(5)" onclick = "Message6()" align="left">Add to Shopping Cart</a></p>
</td>
<td width="8%" height="10">R66.50</td>
</tr>
</table>
<p align="center">E-mail us for more information: <a href="mailto:easycredit@hotmail.com">easycredit@hotmail.com</a></p>
</body>
</html>




Below is the code you gave me. It gives an error when i tried testing it. The error says that "total is undefined" And it points to the line total.appendChild(total_msg); I don't know if it is going to give more errors because I can't get past this one.




<html>
<head>
<title>JavaScript Cookies - Shopping Cart</title>
<script type="text/javascript">
var item_name = [];
item_name[0] = "T-Shirt - Small";
item_name[1] = "T-Shirt - Medium";
item_name[2] = "T-Shirt - Large";
item_name[3] = "Lime Green Cap";
item_name[4] = "Orange Cap";
item_name[5] = "Teddy Bear";

var item_price = [];
item_price[0] = 29.50;
item_price[1] = 34.50;
item_price[2] = 39.50;
item_price[3] = 18.75;
item_price[4] = 18.75;
item_price[5] = 66.50;

var item_number = [];

if(document.cookie) process_cookie()

function process_cookie() {
var whole_cookie = unescape(document.cookie);
var drop_name = whole_cookie.split("=");
if(drop_name[1]) item_number = drop_name[1].split("xxx");
}

function kill_cookies() {
var kill_date = new Date("January 1, 1970");
document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
}

function remove(which) {
item_number.splice(which, 1);
if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx");
else kill_cookies();
fill_table();
}

function fill_table() {
var parent_el = document.getElementById("cart");
for(var i = 0; i < parent_el.childNodes.length; i++) {
parent_el.removeChild(parent_el.childNodes[i]);
}
var price_total = 0;
for(var i = 0; i < item_number.length; i++) {
var row = document.createElement("tr");
var name = document.createElement("td");
name.appendChild(document.createTextNode(item_name[item_number[i]]));
var price = document.createElement("td");
price.appendChild(document.createTextNode(item_price[item_number[i]]));
var remove = document.createElement("td");
var del_link = document.createElement("a");
del_link.appendChild(document.createTextNode("Remove from cart"));
del_link.setAttribute("href", "javascript:remove(" + i + ")");
remove.appendChild(del_link);
row.appendChild(name);
row.appendChild(price);
row.appendChild(remove);
parent_el.appendChild(row);
price_total += item_price[item_number[i]];
}
if(i) {
var row = document.createElement("tr");
total_msg = document.createElement("td");
total_msg.appendChild(document.createTextNode("Total:"));
total_price = document.createElement("td");
total_price.appendChild(document.createTextNode("R" + price_total));
total.appendChild(total_msg);

total.appendChild(total_price);
total.appendChild(document.createElement("td"));
parent_el.appendChild(total);
}
else {
var row = document.createElement("tr");
var no_items = document.createElement("td");
no_items.appendChild(document.createTextNode("No items in cart"));
row.appendChild(no_items);
parent_el.appendChild(row);
}
}
window.onload = fill_table;
</script>
</head>
<body>
<h1 align="center">Easy Credit Shopping Cart</h1>
<p>&nbsp;</p>
<hr>
<div align="center"><table width="70%" border="1">
<table id="cart">
</table>
</div>
<div align="center">
<p>&nbsp;</p>
<p><a href="Home.html">Return to Order Page</a></p>
<p><a href="Order.html">Display Printable Order Form</a><br><br></p>
</div>
</body>
</html>

dumpfi
07-13-2004, 04:14 PM
This should work:
<html>
<head>
<title>JavaScript Cookies - Shopping Cart</title>
<script type="text/javascript">
var item_name = [];
item_name[0] = "T-Shirt - Small";
item_name[1] = "T-Shirt - Medium";
item_name[2] = "T-Shirt - Large";
item_name[3] = "Lime Green Cap";
item_name[4] = "Orange Cap";
item_name[5] = "Teddy Bear";

var item_price = [];
item_price[0] = 29.50;
item_price[1] = 34.50;
item_price[2] = 39.50;
item_price[3] = 18.75;
item_price[4] = 18.75;
item_price[5] = 66.50;

var item_number = [];

if(document.cookie) process_cookie()

function process_cookie() {
var whole_cookie = unescape(document.cookie);
var drop_name = whole_cookie.split("=");
if(drop_name[1]) {
item_number = drop_name[1].split("xxx");
item_number.pop();
}
}

function kill_cookies() {
var kill_date = new Date("January 1, 1970");
document.cookie = "stuff=stub;expires=" + kill_date.toGMTString();
}

function remove(which) {
item_number.splice(which, 1);
if(item_number.length) document.cookie = "stuff=" + item_number.join("xxx") + "xxx";
else kill_cookies();
process_cookie();
fill_table();
}

function remove_table() {
var elem;
if(elem = document.getElementById("cart")) {
while(elem.childNodes.length) {
elem.removeChild(elem.childNodes[0]);
}
elem.parentNode.removeChild(elem);
}
}

function fill_table() {
remove_table();
var cart = document.createElement("table");
cart.id = "cart";
cart.setAttribute("width", "70%");
cart.setAttribute("border", 1);
var price_total = 0;
for(var i = 0; i < item_number.length; i++) {
var row = document.createElement("tr");
var name = document.createElement("td");
name.appendChild(document.createTextNode(item_name[item_number[i]]));
var price = document.createElement("td");
price.appendChild(document.createTextNode(item_price[item_number[i]]));
var remove = document.createElement("td");
var del_link = document.createElement("a");
del_link.appendChild(document.createTextNode("Remove from cart"));
del_link.setAttribute("href", "javascript:remove(" + i + ")");
remove.appendChild(del_link);
row.appendChild(name);
row.appendChild(price);
row.appendChild(remove);
cart.appendChild(row);
price_total += item_price[item_number[i]];
}
if(i) {
var total = document.createElement("tr");
total_msg = document.createElement("td");
total_msg.appendChild(document.createTextNode("Total:"));
total_price = document.createElement("td");
total_price.appendChild(document.createTextNode("R" + price_total));
total.appendChild(total_msg);
total.appendChild(total_price);
total.appendChild(document.createElement("td"));
cart.appendChild(total);
}
else {
var row = document.createElement("tr");
var no_items = document.createElement("td");
no_items.appendChild(document.createTextNode("No items in cart"));
row.appendChild(no_items);
cart.appendChild(row);
}
document.getElementById("cart_container").appendChild(cart);
// let ie display the table.. *sigh*
if(document.all && !window.opera) document.getElementById("cart_container").innerHTML = document.getElementById("cart_container").innerHTML;
}
window.onload = fill_table;
</script>
</head>
<body>
<h1 align="center">Easy Credit Shopping Cart</h1>
<p>&nbsp;</p>
<hr>
<div align="center" id="cart_container">
</div>
<div align="center">
<p>&nbsp;</p>
<p><a href="Home.html">Return to Order Page</a></p>
<p><a href="Order.html">Display Printable Order Form</a><br><br></p>
</div>
</body>
</html>dumpfi

Edit: ie displays the table now.

HiEverybody
07-13-2004, 08:49 PM
I am very grateful for your help I have learned alot by just looking at the way you code a web page!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum