When this page loads the table should fill using onload=“fillTable()” with 4 rows from an array called foodArray. Each row gets a grab button assigned with a unique id. Then when you click on one of the buttons, it should call function addRow. In addRow, i’m trying to use the this keyword to refer to the button that called it, then use an alert window to show the button id. but when the script runs, alert is not giving the id its just a blank alert window. whats wrong with it?
Thanks, Geoff
<!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">
</style>
<link href="basicstyle.css" rel="stylesheet" type="text/css" />
<link href="tablestyle.css" rel="stylesheet" type="text/css" />
<link href="advancestyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var food1 = new Array("-", "Boneless Chicken Breast", "M&M", "Meat & Alternatives", "1 breast", "125g", 110, 2, 0.5, 0, 65, 650, 0, 0, 0, 22);
var food2 = new Array("-", "Teriyaki Style Rice", "Uncle Ben's Fast & Fancy", "Grain Products", "1/4 package", "44g", 160, 0.5, 0.2, 0.1, 0, 520, 34, 0, 4, 3);
var food3 = new Array("-", "Whole Kernel Corn", "Irrestibles", "Fruit & Vegetables", "1/2 cup", "125mL", 80, 0.5, 0, 0, 0, 10, 15, 2, 1, 2);
var food4 = new Array("-", "Ketchup", "Heinz", "Condiments", "1 tbsp", "15mL", 20, 0, 0, 0, 0, 140, 5, 0, 4, 0.3);
var foodArray = [food1, food2, food3, food4];
var buttonValue = "Grab";
var onclickString = "addRow()";
//**************************************same fillTable as in aisle1************************************
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.length > xPage) && (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=\\"" + buttonValue + "\\" onclick=\\"" + onclickString + "\\">";
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 = "-";
}
}
}
}
function addRow ( e ) {
if (!e)
var e = window.event;
alert ("Add row");
alert (this.id);
var insertFoodRow = "";
var t2body = document.getElementById("t2body");
var row = document.createElement("tr");
}
</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 3:</h1>
<h2>Make a combo or recipe</h2>
<div id="content1" class="type1div">
<div id="table2" 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 id="t2body">
</tbody>
</table>
</div>
</div>
<br />
<div id="content2" class="type1div">
<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>
</div>
</div>
</body>
</html>
