There’s 2 problems i’m having with this code.
-
foodArray is a multidimensional array that is initialized with 13 elements at the start. When i load the page, the body onload event calls the fillTable function, which fills the table with the first 5 elements of foodArray. If i then click the next button in the bottom right corner, it shows the next
5 elements of foodArray by again calling the fillTable function, incrementing page variable by 1. If I press next a 3rd time it shows the last 3 items of foodArray, but it does not overwrite the last 2 rows of the output table that were filled with the previous second call to the fillTable function. This should happen because there are no elements in foodArray[13] and foodArray[14], and i tried to write the fillTable function to detect when the array is undefined and output dashes instead. How do i fix the fillTable function to overwrite these last 2 rows when the array is empty? the fillTable function seems to be crashing when it reaches these last 2 rows. -
The second problem is simpler. Each add button in the table has a unique id defined by the fillTable function. When i click on one of these buttons, its supposed to call function add, which is supposed to turn the table cell with the add button clicked to a yellow background. what’s wrong with it?
Thanks in advance, G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#content1 {
position: absolute;
right: 10px;
z-index: 1;
top: 100px;
}
</style>
<link href="basicstyle.css" rel="stylesheet" type="text/css" />
<link href="advancestyle.css" rel="stylesheet" type="text/css" />
<link href="tablestyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var food1 = new Array("-", "100% Parmesan Cheese", "Kraft", "Dairy & Alternatives", "2 Tbsp", "12g", 45, 2.5, 1.5, 0.1, 5, 230, 1, 0, 0, 5);
var food2 = new Array("-", "100% Whole wheat bread", "Dempsters", "Grain Products", "2 slices", "71g", 180, 2, 0.5, 0, 0, 240, 33, 4, 3, 7);
var food3 = new Array("-", "Canned Cut Asparagus", "Selection", "Fruit & Vegetables", "1/2 cup", "125mL", 25, 0.3, 0, 0, 0, 260, 4, 2, 2, 2);
var food4 = new Array("-", "Chinese Fried Rice", "Uncle Ben's Fast & Fancy", "Grain Products", "1/4 package", "42g", 150, 0.5, 0.2, 0, 0, 370, 33, 1, 1, 3);
var food5 = new Array("-", "Cooked Turkey Breast", "Pillar's", "Meat & Alternatives", "2 slices", "40g", 40, 0.5 ,0.3, 0, 20, 460, 1, 0, 1 ,8);
var food6 = new Array("-", "Diet Coke", "Coke", "Beverages", "-", "250mL", 0, 0, 0, 0, 0, 35, 0, 0, 0, 0.1, "-");
var food7 = new Array("-", "Honey Nut O's Cereal", "Selection", "Grain Products", "3/4 cup", "30g", 120, 0.5, 0, 0, 0, 150, 26, 2, 12, 2);
var food8 = new Array("-", "Hot dogs", "Schneider's", "Meat & Alternatives", "1 wiener", "37g", 120, 10, 3.5, 0.1, 20, 410, 2, 0, 0, 5);
var food9 = new Array("-", "Milk Chocolate Crispie Joys", "Harry London", "Treats", "About 4", "40g", 190, 10, 6, 0, 5, 55, 26, "<1g", 18, 3);
var food10 = new Array("-", "Mozzarella cheese", "Black Diamond", "Dairy & Alternatives", "1/4 inch cube", "30g", 110, 8, 5, 0.2, 25, 230, 1, 0, 0, 8);
var food11 = new Array("-", "Pancake and Waffle Mix", "Selection", "Grain Products", "1/3 cup", "34g", 120, 1.5, 0.4, 0, 15, 510, 23, 1, 3, 3);
var food12= new Array("-", "Rancher's Choice Calorie Wise", "Kraft", "Oils & Fats", "1 Tbsp.", "15mL", 35, 2.5, 0.4, 0, 5, 170, 3, 0, 1, 0.1);
var food13 = new Array("-", "Strawberry Cereal Bars", "Selection", "Grain Products", "1 bar", "38g", 130, 2.5, 0.2, 0, 5, 210, 25, 3, 10, 2);
var foodArray = [food1, food2, food3, food4, food5, food6, food7, food8, food9, food10, food11, food12, food13];
var resultArray = [ [ ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];
var arrayToSearch = [ [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];
var arrayRows;
var arrayColumns;
var outputTableRows;
var outputTableColumns;
var page = 1;
var resultCount = 0;
function fillTable( arr, p ) {
//fill the output table with whatever array is passed to it in form of arr parameter.
outputTableRows = 5;
outputTableColumns = 16;
for (var x = 0; x < outputTableRows; x++) {
var xPage = (x + 5 * (p - 1));
for (var y = 0; y < outputTableColumns; y++) {
//set id variable in order to refer to each cell in the output table by this id.
var id = x + "_" + y;
if ( (arr[xPage][y] != undefined) ) {
//if its the first column, put in a button, or else put in the resultArray[x][y] value in the output table cell.
if (y == 0)
document.getElementById(id).innerHTML = "<input id=\\"b" + id + "\\" type=\\"button\\" value=\\"add\\" onclick=\\"add()\\">";
else
document.getElementById(id).innerHTML = arr[xPage][y];
//else if the resultArray entry is undedefined, just put in a dash in the output table cell.
} else {
document.getElementById(id).innerHTML = "-";
}
}
}
}
// why wont this work????????????????????????????????????????
function add( e ) {
alert("Add");
if (!e)
var e = window.event;
var callerId = this.id;
alert(callerId);
this.parent.style.backgroundColor = "yellow";
}
function searchArray() {
//search the array containing all database food items (foodArray), a 2 dimensional array.
//find array entries that match search results.
//put search results into 2 dimesional array foodArray.
//display foodArray in output table.
//re-intitialize resultArray to empty it, and resultCount to 0.
var resultArray = [ [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];
var arrayToSearch = [ [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ], [ , ] ];
resultCount = 0;
page = 1;
//get search terms.
food = document.getElementById("foodsearch").value;
brand = document.getElementById("brandsearch").value;
foodType = document.getElementById("foodtypesearch").value;
//set rows and columns dynamiically and for the output table
//this uses foodArray to start.
//only works if all rows of foodArray have the correct length, because always uses the first row to count length.
arrayRows = foodArray.length;
arrayColumns = foodArray[0].length;
outputTableRows = 5;
outputTableColumns = 16;
//if a search term is entered for food
if (food != "") {
//for each row in the foodArray table
for (var x = 0; x < arrayRows; x++) {
//search the second column of each foodArray item for the search term.
var result = foodArray[x][1].indexOf(food);
//if a match was found, put the result into a new row for resultArray referred to by resultCount.
if (result != -1) {
for (var y = 0; y < arrayColumns; y++) {
resultArray[resultCount][y] = foodArray[x][y];
}
resultCount += 1;
}
}
fillTable( resultArray, page );
}
//if a search term is entered for brand
if (brand != "") {
//for each row in the foodArray table
for (var x = 0; x < arrayRows; x++) {
//search the second column of each foodArray item for the search term.
var result = foodArray[x][2].indexOf(brand);
//if a match was found, put the result into a new row for resultArray referred to by resultCount.
if (result != -1) {
for (var y = 0; y < arrayColumns; y++) {
resultArray[resultCount][y] = foodArray[x][y];
}
resultCount += 1;
}
}
fillTable ( resultArray, page );
}
//if a search term is entered for foodType
if (foodType != "") {
//for each row in the foodArray table
for (var x = 0; x < arrayRows; x++) {
//search the second column of each foodArray item for the search term.
var result = foodArray[x][3].indexOf(foodType);
//if a match was found, put the result into a new row for resultArray referred to by resultCount.
if (result != -1) {
for (var y = 0; y < arrayColumns; y++) {
resultArray[resultCount][y] = foodArray[x][y];
}
resultCount += 1;
}
}
fillTable ( resultArray, page );
}
}
function resetSearch() {
page = 1;
fillTable ( foodArray, page );
document.getElementById("foodsearch").value = "";
document.getElementById("brandsearch").value = "";
document.getElementById("foodtypesearch").value = "";
}
function start() {
alert("Start pressed");
page = 1;
fillTable ( foodArray, page );
}
function last() {
alert("Last");
page -= 1;
fillTable ( foodArray, page );
}
function next() {
alert("Next");
page += 1;
fillTable ( foodArray, page );
}
function end() {
alert("End");
page = 3;
fillTable ( foodArray, page );
}
</script>
</head>
<body onload="fillTable( foodArray, 1 )">
<div id="dcontainer" class="type3div">
<div id="dheader" class="type2div">
<div id="dlogo" class="type1div"></div>
<div id="dlogin" class="type1div"></div>
</div>
<div id="dmenubar" class="type2div">
<a href=""><div id="dmenu1" class="navigation">Page 1</div></a>
<a href=""><div id="dmenu2" class="navigation">Page 2</div></a>
<a href=""><div id="dmenu3" class="navigation">Page 3</div></a>
<a href=""><div id="dmenu4" class="navigation">Page 4</div></a>
<a href=""><div id="dmenu5" class="navigation">Page 5</div></a>
</div>
<div id="dcontent" class="type2div">
<h1>Grocery Store Aisle 1: Select food items from a database</h1>
<div id="content1" class="type1div">
<div id="legend">
<table border="1">
<tr>
<td colspan="2" align="center"><b>Legend</b></td>
</tr>
<tr>
<td>SS = Serving Size</td><td>Sod = Sodium</td>
</tr>
<tr>
<td>Cal = Calories</td><td>Carb = Carbohydrate</td>
</tr>
<tr>
<td>Fat = Fat</td><td>Fib = Carbohydrate: Fibre</td>
</tr>
<tr>
<td>Sat = Fat: Saturated</td><td>Sug = Carbohydrate: Sugars</td>
</tr>
<tr>
<td>Trans = Fat: Trans</td><td>Pro = Protein</td>
</tr>
<tr>
<td>Chol = Cholesterol</td><td style="background-color: yellow">Items in yellow are already in your fridge</td>
</tr>
</table>
</div>
</div>
<div id="content2" class="type1div">
<div id="search">
<h2>Search Aisle 1</h2>
<form id="form1" name="form1" method="post" action="">
<table border="1">
<tr>
<td>Food:</td>
<td><input id="foodsearch" type="text" size="30" /></td>
</tr>
<tr>
<td>Brand:</td>
<td><input id="brandsearch" type="text" size="30" /></td>
</tr>
<tr>
<td>Food Type:</td>
<td><input id="foodtypesearch" type="text" size="30" /></td>
<tr>
<td colspan="2" align="right">
<input id="resetsearch" type="button" size="20" value="Reset Search" onclick="resetSearch()" />
<input id="gosearch" type="button" size="20" value="Search" onclick="searchArray()" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="content3" class="type1div">
<h2>Results</h2>
<div id="table1" class="outputTable">
<table border="1">
<thead>
<tr>
<th class="tableHeadMediumCenter">Edit</th>
<th class="tableHeadLargeLeft">Food</th>
<th class="tableHeadLargeLeft">Brand</th>
<th class="tableHeadLargeLeft">Food Type</th>
<th class="tableHeadLargeLeft">Serving Amount</th>
<th class="tableHeadSmallCenter">SS</th>
<th class="tableHeadSmallCenter">Cal</th>
<th class="tableHeadSmallCenter">Fat</th>
<th class="tableHeadSmallCenter">Sat</th>
<th class="tableHeadSmallCenter">Trans</th>
<th class="tableHeadSmallCenter">Chol</th>
<th class="tableHeadSmallCenter">Sod</th>
<th class="tableHeadSmallCenter">Carb</th>
<th class="tableHeadSmallCenter">Fib</th>
<th class="tableHeadSmallCenter">Sug</th>
<th class="tableHeadSmallCenter">Pro</th>
</tr>
</thead>
<tbody>
<tr>
<td id="0_0" class="tableCellCenterTop">-</td>
<td id="0_1" class="tableCellLeftTop">-</td>
<td id="0_2" class="tableCellLeftTop">-</td>
<td id="0_3" class="tableCellLeftTop">-</td>
<td id="0_4" class="tableCellLeftTop">-</td>
<td id="0_5" class="tableCellCenterTop">-</td>
<td id="0_6" class="tableCellCenterTop">-</td>
<td id="0_7" class="tableCellCenterTop">-</td>
<td id="0_8" class="tableCellCenterTop">-</td>
<td id="0_9" class="tableCellCenterTop">-</td>
<td id="0_10" class="tableCellCenterTop">-</td>
<td id="0_11" class="tableCellCenterTop">-</td>
<td id="0_12" class="tableCellCenterTop">-</td>
<td id="0_13" class="tableCellCenterTop">-</td>
<td id="0_14" class="tableCellCenterTop">-</td>
<td id="0_15" class="tableCellCenterTop">-</td>
</tr>
<tr>
<td id="1_0" class="tableCellCenterTop">-</td>
<td id="1_1" class="tableCellLeftTop">-</td>
<td id="1_2" class="tableCellLeftTop">-</td>
<td id="1_3" class="tableCellLeftTop">-</td>
<td id="1_4" class="tableCellLeftTop">-</td>
<td id="1_5" class="tableCellCenterTop">-</td>
<td id="1_6" class="tableCellCenterTop">-</td>
<td id="1_7" class="tableCellCenterTop">-</td>
<td id="1_8" class="tableCellCenterTop">-</td>
<td id="1_9" class="tableCellCenterTop">-</td>
<td id="1_10" class="tableCellCenterTop">-</td>
<td id="1_11" class="tableCellCenterTop">-</td>
<td id="1_12" class="tableCellCenterTop">-</td>
<td id="1_13" class="tableCellCenterTop">-</td>
<td id="1_14" class="tableCellCenterTop">-</td>
<td id="1_15" class="tableCellCenterTop">-</td>
</tr>
<tr>
<td id="2_0" class="tableCellCenterTop">-</td>
<td id="2_1" class="tableCellLeftTop">-</td>
<td id="2_2" class="tableCellLeftTop">-</td>
<td id="2_3" class="tableCellLeftTop">-</td>
<td id="2_4" class="tableCellLeftTop">-</td>
<td id="2_5" class="tableCellCenterTop">-</td>
<td id="2_6" class="tableCellCenterTop">-</td>
<td id="2_7" class="tableCellCenterTop">-</td>
<td id="2_8" class="tableCellCenterTop">-</td>
<td id="2_9" class="tableCellCenterTop">-</td>
<td id="2_10" class="tableCellCenterTop">-</td>
<td id="2_11" class="tableCellCenterTop">-</td>
<td id="2_12" class="tableCellCenterTop">-</td>
<td id="2_13" class="tableCellCenterTop">-</td>
<td id="2_14" class="tableCellCenterTop">-</td>
<td id="2_15" class="tableCellCenterTop">-</td>
</tr>
<tr>
<td id="3_0" class="tableCellCenterTop">-</td>
<td id="3_1" class="tableCellLeftTop">-</td>
<td id="3_2" class="tableCellLeftTop">-</td>
<td id="3_3" class="tableCellLeftTop">-</td>
<td id="3_4" class="tableCellLeftTop">-</td>
<td id="3_5" class="tableCellCenterTop">-</td>
<td id="3_6" class="tableCellCenterTop">-</td>
<td id="3_7" class="tableCellCenterTop">-</td>
<td id="3_8" class="tableCellCenterTop">-</td>
<td id="3_9" class="tableCellCenterTop">-</td>
<td id="3_10" class="tableCellCenterTop">-</td>
<td id="3_11" class="tableCellCenterTop">-</td>
<td id="3_12" class="tableCellCenterTop">-</td>
<td id="3_13" class="tableCellCenterTop">-</td>
<td id="3_14" class="tableCellCenterTop">-</td>
<td id="3_15" class="tableCellCenterTop">-</td>
</tr>
<tr>
<td id="4_0" class="tableCellCenterTop">-</td>
<td id="4_1" class="tableCellLeftTop">-</td>
<td id="4_2" class="tableCellLeftTop">-</td>
<td id="4_3" class="tableCellLeftTop">-</td>
<td id="4_4" class="tableCellLeftTop">-</td>
<td id="4_5" class="tableCellCenterTop">-</td>
<td id="4_6" class="tableCellCenterTop">-</td>
<td id="4_7" class="tableCellCenterTop">-</td>
<td id="4_8" class="tableCellCenterTop">-</td>
<td id="4_9" class="tableCellCenterTop">-</td>
<td id="4_10" class="tableCellCenterTop">-</td>
<td id="4_11" class="tableCellCenterTop">-</td>
<td id="4_12" class="tableCellCenterTop">-</td>
<td id="4_13" class="tableCellCenterTop">-</td>
<td id="4_14" class="tableCellCenterTop">-</td>
<td id="4_15" class="tableCellCenterTop">-</td>
</tr>
</tbody>
</table>
</div>
<div id="scroll">
<span onclick="start()">‹‹Start</span>
<span onclick="last()">‹Last</span>
<span onclick="next()">Next›</span>
<span onclick="end()">End››</span>
</div>
</div>
</div>
</div>
</body>
</html>