Trying to target table id with jQuery... what am i doing wrong?

**Jerrell_B** · 05-23-2012 05:37 PM

Hello All,

I am working on a project that consists of jQuery, JSON, and traditional JavaScript syntax.

I would like to have jQuery make a table visible when a user selects a specific region otherwise it should remain invisible. My code is working somewhat I am just having trouble targeting the selector in jQuery.

I believe this line

Code:

 document.writeln("<table id= \"north\" border=\"0\" width=\"100\">");

is written incorrect therefore when i attempt target (table #north) with jQuery, jQuery is unable to find the "id" tag.

Any suggestions are welcome.

Thank you for your time and efforts in advance.

Code:

$(function(){
         $("table #north").hide();
		
			$("#region").change(function(){
				if($("#region").val()=="3"){
				
					$("table #north").show();
				}else{
					$("table #north").hide();
				
				}
			});
		
		});

JavaScript code:

Code:

<script type="text/javascript">
			var i;
			
			document.writeln("<table id= \"north\" border=\"0\" width=\"100\">"); <=== I believe the problem is here?

	for(i=0;i<Hoes.North.length;i++) //retrieve North-East Hoes
	{
		document.writeln("<td>");
		document.writeln("<tr><td><b>Hoe_Name:<b></td><td width=50>"+Hoes.North[i].Name+"</td></tr>"),
		document.writeln("<tr><td><b>Hoe_Age:<b></td><td width=50>"+Hoes.North[i].age+"</td></tr>"),
		document.writeln("<tr><td><b>Location:<b></td><td width=50>"+Hoes.North[i].location+"</td></tr>");
	}
			document.writeln("</td></table><br>");

**Padonak** · 05-24-2012 02:38 AM

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>...</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var Hoes_North=[
/* 'name', 'age', 'location' */
['aaa','1','somewhere'],
['bbb','2','somewhere'],
['ccc','3','somewhere']
];

document.writeln("<table align='center' id='north' border='0' width='100'>");
for(var i=0;i<Hoes_North.length;i++){
document.writeln("<tr><td><b>Hoe_Name:<b></td><td width='50'>"+Hoes_North[i][0]+"</td></tr>");
document.writeln("<tr><td><b>Hoe_Age:<b></td><td width='50'>"+Hoes_North[i][1]+"</td></tr>");
document.writeln("<tr><td><b>Location:<b></td><td width='50'>"+Hoes_North[i][2]+"</td></tr>");
}
document.writeln("</table><br>");

$(document).ready(function(){
$("table#north").hide();
$("#region").change(function(){
if($("#region").val()=="3"){$("table#north").show();}
else{$("table#north").hide();}
$(this).blur();
});
});
</script>
</head>
<body>
<center>
<select id="region"><option value="">choose</option><option value="3">North</option><option value="2">South</option></select>
</center>
</body>
</html>

**Jerrell_B** · 05-24-2012 10:56 AM

Hi Padonak! Thank you for your help. It is now working perfect! I decided to go with a switch statement to optimism the code a bit.

Code:

$("#region").change(function(){
		
		switch(true){
			case($(this).val()=="1"):
				$("table#north").show();
				$('table#south, table#west').hide();
				break;
			case($(this).val()=="2"):
				$("table#south").show();
				$('table#north, table#west').hide();
				break;
			case($(this).val()=="3"):
				$("table#west").show();
				$('table#north, table#south').hide();
				break;
			default:
		}
			});

**Padonak** · 05-24-2012 02:03 PM

one more (paranoid lol):

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>...</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var hoes=[
/* 'id', 'name', 'age', 'location' */
['north','aaa','1','somewhere'],
['north','bbb','2','somewhere'],
['north','ccc','3','somewhere'],

['south','ddd','11','somewhere'],
['south','eee','22','somewhere'],
['south','fff','33','somewhere'],

['west','kkk','44','somewhere'],
['west','lll','55','somewhere'],
['west','mmm','66','somewhere']
];

var curr='';
document.writeln("<center>");
for(var i in hoes){
if(i==0){curr=hoes[i][0];document.writeln("<table align='center' id='"+curr+"' border='1' width='100' style='display:none'>");}
if(i>0&&hoes[i][0]!=curr){
curr=hoes[i][0];
document.writeln("</table>");
document.writeln("<table align='center' id='"+curr+"' border='1' width='100' style='display:none'>");
}
document.writeln("<tr><td><b>Hoe_Name:<b></td><td width='50'>"+hoes[i][1]+"</td></tr>");
document.writeln("<tr><td><b>Hoe_Age:<b></td><td>"+hoes[i][2]+"</td></tr>");
document.writeln("<tr><td><b>Location:<b></td><td>"+hoes[i][3]+"</td></tr>");
}
document.writeln("</table>");
curr='';
document.writeln("<select id='region'><option value=''>choose</option>");
for(var k in hoes){
if(hoes[k][0]!=curr){
curr=hoes[k][0];
document.writeln("<option value='"+curr+"'>"+(curr.substring(0,1).toUpperCase()+curr.substring(1,curr.length))+"</option>");
}
}
document.writeln("</select></center>");


$(document).ready(function(){
$("#region").change(function(){
var val=$(this).val(),opts=this.options;
if(val!=""){
for(var i in opts){
var opval=opts[i].value;
if(opval==val || opval==''){continue;}
else{$("#"+opval).hide();}
}
$("#"+val).show();
}
$(this).blur();
});
});
</script>
</head>
<body></body>
</html>

**Jerrell_B** · 05-24-2012 02:28 PM

Awesome! When you have a sec if you don't mind can explain the code a little bit? I am trying to become proficient with javascript and frameworks.

Also, can you recommend any additional websites, blogs, books etc focused on javascript and frameworks api development?

Thanks again Padonak.

Code:

$(document).ready(function(){
$("#region").change(function(){
var val=$(this).val(),opts=this.options;
if(val!=""){
for(var i in opts){
var opval=opts[i].value;
if(opval==val || opval==''){continue;}
else{$("#"+opval).hide();}
}
$("#"+val).show();
}
$(this).blur();
});

**Padonak** · 05-24-2012 03:17 PM

prepare yourself for terrible english in my comments

Code:

$(document).ready(function(){// Specify a function to execute when the DOM is fully loaded

$("#region").change(function(){// when we change SELECT

var val=$(this).val(), // shorthand for the selected option value

opts=this.options; // this is array which contains all the options of this SELECT

if(val!=""){// if this is not the first option (which has no value and is just a header)

for(var i in opts){// we start a loop

var opval=opts[i].value;// shorthand for the current option value (current in the loop)

if(opval==val || opval==''){continue;}// if the current in the loop option is "choose" which has no value or if this is the selected one - the loop skips this index. that's because we are looking for table id's to hide.

else{$("#"+opval).hide();}// this option is not the selected one and not "choose". that means this value contains id of a table to hide
}

$("#"+val).show();// after the loop stops we show the proper table
}

$(this).blur();// this removes focus from SELECT
});
});

i don't think i can recommend you websites. i am not a prof coder, scripting is just a hobby for me. and i love this forum ))

as for books, i can share JQuery reference if you need it.

**Jerrell_B** · 05-24-2012 08:34 PM

Padonak Thanks so much for all your help! I am going to store this in my js library for future reference. I have a lot to learn but i am having fun doing it.

**Crazykid1099** · 05-24-2012 08:43 PM

Hey sorry for commenting but, moderators can you accept my post?

Thread: Trying to target table id with jQuery... what am i doing wrong?

Thread Tools

Display

Trying to target table id with jQuery... what am i doing wrong?

It Worked!

Sweet!!!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions