Jump to content

Setting Display Value Array Elements


johnnyg24

Recommended Posts

I am having a hard time properly setting all row display properties with the script below.Array:

items = new Array("HERS-1", "KEIT-1", "JOPL-1")projects = new Array("John", "Patty", "John")

script:

function findRow(number){	for(i=0;i<items.length;i++){		if(projects[i] == number){			document.getElementById(projects[i]).style.display = 'table-row'		}else{			document.getElementById(projects[i]).style.display = 'none'		}	}}

With the above script, only rows with an id of "Patty" should be displayed. However, the row containing the items array element of "JOPL-1" is also being displayed. Because this is in row "John", the display should be 'none', but it doesn't even set ANY display property.I have looked at this in FF and know the row id's are being set properly and the function cycles through each projects correctly, but it doesn't even set the last row's display property. If I change the projects array to contain three different elements, the script will set the all row display properties correctly.Can someone help me figure out why this is happening? Thank you.

Link to comment
Share on other sites

I changed the row id values to the row name values and if I change the script to:

function findRow(number){	var thisOne = "project" + number;	var which = document.getElementById(thisOne).innerHTML;	for(i=0;i<items.length;i++){		if(projects[i] == which){			document.getElementsByName(projects[i]).style.display = 'table-row'		}		if(projects[i] != which){			document.getElementsByName(projects[i]).style.display = 'none'		}	}}

I get the error message:

Error: document.getElementsByName(projects[i]).style is undefinedSource File: http://www.estout.com/scripts/CART.jsLine: 164

Why doesn't this work?

Link to comment
Share on other sites

JavaScript doesn't like modifying attributes that weren't there to start with, so give the elements an inline style delcaration to begin with, so it can find it to change it.

Link to comment
Share on other sites

getElementsByName() returns a collection. You'll need to add an [index]if that's the way you want to do it.Be aware that older non-IE browsers may not support getElementsByName().

Link to comment
Share on other sites

JavaScript doesn't like modifying attributes that weren't there to start with, so give the elements an inline style delcaration to begin with, so it can find it to change it.
Basically what is happening on the page is when loaded, an AJAX request is sent to our server, in return a string is passes that has the users shopping cart items and all the item's information. I split this returned string from our server into 8 arrays. Each shopping cart item has a "project" name associated with it. (This is a work around so a user can have more than one shopping cart. Each "project" is in essence a different cart). If a customer wishes to see only items from project "John", then I would like hide all the items that are in other projects. Each item and it's information is contained in a single row with the name of that row being the same as the project name. What I am trying to do is hide all the rows that don't have a project name of "John".Do you have any suggestions as to how I should go about this?Thanks
Link to comment
Share on other sites

I found the solution:

function findRow(number){	var thisOne = "project" + number;	var which = document.getElementById(thisOne).innerHTML;	var tbl = document.getElementById(TABLE_NAME);		for (var i=0; i<tbl.tBodies[0].rows.length; i++) {			if (tbl.tBodies[0].rows[i].myRow.thirteen.name == which ){					tbl.tBodies[0].rows[i].style.display = 'table-row';			}else{				tbl.tBodies[0].rows[i].style.display = 'none'			}						}}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...