Creating Table Rows And Columns With Javascript

[justsomeguy]

You're not quite understanding how functions work. When you define a function like this:

function testfunc(val){  alert(val);}

You're defining a function that takes an argument or parameter. In this case it's just called val. You can send whatever information you want to the function, and when the function runs val will have the value of whatever you send. e.g.:testfunc(10);testfunc("hello");testfunc(document.getElementById('some_id'));So when the table function is defined like this:function drawTextTableTrial(page)Then you just send the page number to it, it's only 1 function though. You could define the function like this:function drawTextTableTrial(page_number, per_page)And then run this to tell it to print the 20 items on page 2:drawTextTableTrial(2, 20);Inside the function, page_number will be set to 2 and per_page will be set to 20.So that's what I meant there, but I think that a global variable is better for this situation than passing a function parameter. If you're passing a parameter then you have to keep updating the link every time to send the next page. This generic link doesn't need to change:<a href="java script:void(0);" onclick="page++; drawTable();">Next</a>So that uses a global variable called page. A global variable is a variable that you can access from any function, you don't need to define it in the function. You declare a global variable outside of any function scope using the var keyword. Inside the function you don't use var with it, if you define the same global variable inside a function using var, it won't use the global version, it will use a local version in the function.

var page = 0;function drawTable(){  alert(page);  page++;}drawTable();drawTable();drawTable();

So that defines a global variable and a function that prints it and then increments it. Since it's global, each time the function increments it, it will still have that value the next time the function runs. So since that function is being run 3 times, if you ran that code you would see 0, 1, and 2 get printed.

And what is the :void(0) doing?

Nothing. I prefer to write Javascript code in the onclick instead of the href, but an <a> tag needs an href. The href in that example tells it to do nothing (the void function is empty).So if you want to go the global route, I would do something like this:

var page = 1;function drawTextTableTrial() {		// var page = 0; dont redefine this here		var per_page = 20 // number of items per page	   ... rest as normal

The links would have page++ or page-- on them like I showed before they run that function.The trick is to make sure you reset page to 1 when they do a new search. Also, you'll need to add some code to check if page is less than 1, set it to 1. If page is greater than the number of pages, set it to the number of pages. So that will also mean calculating the number of pages.

[johnnyg24]

Thanks for the explanations. Here is the code as of now. It works great. I will have to find out how to set the page number back to 1 if a new search takes place and how to calculate how many pages there are. Would I do that inside the function or outside where I placed the 'var page = 1'?

var page = 1;				function drawTextTableTrial() {				var per_page = 20 // number of items per page		var colorSelect = document.getElementById("colorNumber").value;		   	var classSelect = document.getElementById("classNumber").value;		var styleSelect = document.getElementById("styleNumber").value;		var consSelect = document.getElementById("constructionNumber").value;		var nr = 0;		var num_matches = 0;		deleteRows(document.getElementById("mainTableBody"));			for (var i = 0; i < db.length; i++) {								if (db[i].pColor == colorSelect || db[i].construction == consSelect || db[i].pClass == classSelect || db[i].pStyle == styleSelect) {	// something matches				  				if (colorSelect != "" && db[i].pColor != colorSelect)					continue; // skip it - color doesnt match				  if (consSelect != "" && db[i].construction != consSelect)					continue; // skip it - construction doesnt match				  if (classSelect != "" && db[i].pClass != classSelect) 					continue; // class doesnt match				  if (styleSelect != "" && db[i].pStyle != styleSelect) 					continue; // style doesnt match								  				num_matches++;					if (num_matches < (page - 1) * per_page)						  continue; // match goes on an earlier page						if (nr % 4 == 0){								  imgRow = document.getElementById("mainTableBody").insertRow(-1);					  txtRow = document.getElementById("mainTableBody").insertRow(-1);				}								var cellA=imgRow.insertCell(0);								var cellAA=txtRow.insertCell(0);												im = document.createElement("img");				im.src = db[i].skuImg;				im.setAttribute('width', 150);		 		im.setAttribute('height', 150);				cellA.appendChild(im);																lk = document.createElement("a");				lk.href = "sku.html?" + db[i].idNum;					lk.innerHTML = db[i].pColor + " / " + db[i].desc;				lk.setAttribute('class', 'BodyText');				cellAA.appendChild(lk);												nr++												if (nr == per_page)					  break; // stop the loop				}			}					 }

Also, I included some new script I am working on that is creating a link with the description name and calling a new page called sku.html. This is trying to happen in the above code with lk.href. I am trying to pass the db.idNum in the URI and retrieve it in the sku.html page using location.search. I keep reading about the encodeURI and the decodingURI function. If you have a moment could you explain to me how these work. Thanks.when the sku.html page loads, I basically load the xml data again using the same method as before and build my array. Here is the script I am trying to use to get the db.idNum from the location.search. I wrote the document.write(idSelect) to see if it takes off the "?", and it looks like it does, but I don't think it really is.

function idDetail() {		 	var re = location.search;				var idNumber = re.replace("?", "");						var idSelect = idNumber;			//document.write(idSelect);				for (var i = 0; i < db.length; i++) {									if (db[i].idNum == idSelect){						im = document.createElement("img");						im.src = db[i].skuImg;						im.setAttribute('width', 350);		 				im.setAttribute('height', 350);						document.getElementById("image").appendChild(im);						document.getElementById("description").innerHTML = db[i].desc;						document.getElementById("fiber").innerHTML = db[i].fiber;						document.getElementById("country").innerHTML = db[i].country;						document.getElementById("test").innerHTML = db[i].pTest;						document.getElementById("rr").innerHTML = db[i].rr;						document.getElementById("confinment").innerHTML = db[i].confCode;						document.getElementById("patternWidth").innerHTML = db[i].pWidth;						document.getElementById("vrepeat").innerHTML = db[i].vRepeat;						document.getElementById("hrepeat").innerHTML = db[i].hRepeat;					}				}		}

[justsomeguy]

I will have to find out how to set the page number back to 1 if a new search takes place and how to calculate how many pages there are. Would I do that inside the function or outside where I placed the 'var page = 1'?

You'll probably want to add a couple helper functions. Clicking on search or choosing the options or whatever should trigger a new function instead of the draw function. The new function can set everything up to get ready for the search, like setting the page to 1 and maybe even calculating the total pages. In that case you would stick the total pages in a global variable also. Once it calculates everything, then it would run the draw function to kick things off. The next and previous links would still just run the draw function, or you can create a nextPage or previousPage function that changes the page variable and calls the draw function.

I keep reading about the encodeURI and the decodingURI function. If you have a moment could you explain to me how these work. Thanks.

They just convert characters that shouldn't be in a URL. Characters like '/', '?', '&', '=', etc have a special meaning in a URL, so those functions convert them to a character code so that they don't break the URL.

I wrote the document.write(idSelect) to see if it takes off the "?", and it looks like it does, but I don't think it really is.

String.replace uses a regular expression, and a question mark is a special character in a regexp. You might use this instead:var idNumber = re.split("?").join("");

[johnnyg24]

Thank you.Does this script look right to you? I tried writing what I think it is doing beside each line. The table keeps coming up blank on my page. Any suggestions?

 function idDetail() {		 	var re = location.search; //gets the db[i].idNum from the URI			var idNumber = re.split("?").join(""); //removes the "?" and replaces it with ""								for (var i = 0; i < db.length; i++) {	//cycles through the db array								if (db[i].idNum == idNumber){	//if test to see if the idNumber is the same as the db[i].idNum from the array						im = document.createElement("img"); //creates the images tag						im.src = db[i].skuImg; //gets the image src						im.setAttribute('width', 350); //sets the width		 				im.setAttribute('height', 350); //sets the height						document.getElementById("image").appendChild(im); //add the image to the cell named "image"						document.getElementById("description").innerHTML = db[i].desc; //adds the rest of the array data to the appropriate cells...						document.getElementById("fiber").innerHTML = db[i].fiber;						document.getElementById("country").innerHTML = db[i].country;						document.getElementById("test").innerHTML = db[i].pTest;						document.getElementById("rr").innerHTML = db[i].rr;						document.getElementById("confinment").innerHTML = db[i].confCode;						document.getElementById("patternWidth").innerHTML = db[i].pWidth;						document.getElementById("vrepeat").innerHTML = db[i].vRepeat;						document.getElementById("hrepeat").innerHTML = db[i].hRepeat;					}				}		}

[justsomeguy]

Location.search might not actually be a string, the split method is only defined on a string. Maybe replace that first line with this:var re = new String(location.search);You're also trying to use db, but I don't see it defined there. Is it global?

[johnnyg24]

I was able to figure it out. I think I was running the idDetail() function before my array was being build. So it didn't have any data to work with. I got it working. I just have to fine tune everything. Thanks again for all your help.