SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Javascript problems.

    There's 2 problems i'm having with this code.

    1. 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.

    2. 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

    Code HTML4Strict:
    <!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>
    Last edited by felgall; Mar 19, 2011 at 16:04.

  2. #2
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First (this won't fix anything), your food array should probably look like this for simplicity:
    Code javascript:
    var foodArray = [
    	["-", "100% Parmesan Cheese", "Kraft", "Dairy & Alternatives", "2 Tbsp", "12g", 45, 2.5, 1.5, 0.1, 5, 230, 1, 0, 0, 5],
    	["-", "100% Whole wheat bread", "Dempsters", "Grain Products", "2 slices", "71g", 180, 2, 0.5, 0, 0, 240, 33, 4, 3, 7],
    	["-", "Canned Cut Asparagus", "Selection", "Fruit & Vegetables", "1/2 cup", "125mL", 25, 0.3, 0, 0, 0, 260, 4, 2, 2, 2],
    	["-", "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],
    	["-", "Cooked Turkey Breast", "Pillar's", "Meat & Alternatives", "2 slices", "40g", 40, 0.5 ,0.3, 0, 20, 460, 1, 0, 1 ,8],
    	["-", "Diet Coke", "Coke", "Beverages", "-", "250mL", 0, 0, 0, 0, 0, 35, 0, 0, 0, 0.1, "-"],
    	["-", "Honey Nut O's Cereal", "Selection", "Grain Products", "3/4 cup", "30g", 120, 0.5, 0, 0, 0, 150, 26, 2, 12, 2],
    	["-", "Hot dogs", "Schneider's", "Meat & Alternatives", "1 wiener", "37g", 120, 10, 3.5, 0.1, 20, 410, 2, 0, 0, 5],
    	["-", "Milk Chocolate Crispie Joys", "Harry London", "Treats", "About 4", "40g", 190, 10, 6, 0, 5, 55, 26, "<1g", 18, 3],
    	["-", "Mozzarella cheese", "Black Diamond", "Dairy & Alternatives", "1/4 inch cube", "30g", 110, 8, 5, 0.2, 25, 230, 1, 0, 0, 8],
    	["-", "Pancake and Waffle Mix", "Selection", "Grain Products", "1/3 cup", "34g", 120, 1.5, 0.4, 0, 15, 510, 23, 1, 3, 3],
    	["-", "Rancher's Choice Calorie Wise", "Kraft", "Oils & Fats", "1 Tbsp.", "15mL", 35, 2.5, 0.4, 0, 5, 170, 3, 0, 1, 0.1],
    	["-", "Strawberry Cereal Bars", "Selection", "Grain Products", "1 bar", "38g", 130, 2.5, 0.2, 0, 5, 210, 25, 3, 10, 2]
    ];

  3. #3
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will fix your nextTable function:
    Code javascript:
    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].length > y) ) {
    				//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 = "-";
    			}
    		}	
    	}	
    }

  4. #4
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will fix both of your problems:
    Code javascript:
    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].length > y) ) {
    				//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(this)\">"; 
    				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 add(input) {
    	var callerId = input.id;
    	input.parentNode.parentNode.style.backgroundColor = "yellow";
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •