Link to home
Start Free TrialLog in
Avatar of vidhubala
vidhubala

asked on

row attribute value

i am trying to access the value of the attribute tree inside the selected row.
gives error. pl help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	  function selRowRadio() {
		for(i=0;i<document.form1.grRadio.length;i++){
				if(document.form1.grRadio[i].checked){								
						//alert('The selected radio button is: '+document.form1.grRadio[i].value);
						//var tree=document.form1.grRadio[i].parentNode.parentNode.tree.value;
						var tree=document.getElementById(document.form1.grRadio[i].parentNode.parentNode.tree).value;
						alert(tree);
						if (tree =='0')	{
							alert('parent')
						}								
						if (tree =='1') {
							alert('child')
						}
					}			
				}		
			}
  //-->
  </SCRIPT>
 </HEAD>
 <BODY>
 <form name="form1">
  <table id=t  width="200px" border=1>
		<tbody>
		 <tr>
			<th width=20></th>
			<th>Time</th>
			<th>Date</th>
		 </tr>		  
		 <tr tree="0">
			<td width=20><INPUT type=radio NAME="grRadio"  id="gr0" VALUE="hello"></td>
			<td>11</td>
			<td>12/12/2007</td>		
		  </tr> 
		  <tr tree="1">
			<td width=20><INPUT  type=radio NAME="grRadio"  id="gr1" VALUE="hello"></td>
			<td>23</td>
			<td>2/12/2008</td>		
		  </tr>
		  <tr tree="1">
			<td width=20><INPUT type=radio  NAME="grRadio"  id="gr2" VALUE="hello"></td>
			<td>8</td>
			<td>1/12/2008</td>		
		  </tr>
		  <tr tree="0">
			<td width=20><INPUT type=radio NAME="grRadio"  id="gr3" VALUE="hello"></td>
			<td>12</td>
			<td>12/12/2005</td>		
		  </tr> 
		  <tr tree="1">
			<td width=20><INPUT  type=radio NAME="grRadio"  id="gr4" VALUE="hello"></td>
			<td>2</td>
			<td>2/12/2004</td>		
		  </tr>
		  <tr tree="1">
			<td width=20><INPUT type=radio  NAME="grRadio"  id="gr5" VALUE="hello"></td>
			<td>1</td>
			<td>1/12/2003</td>		
		  </tr>
		  <tr>
			<td colspan="3">
				<INPUT TYPE="button" value="selected row" value="selected row" onclick="selRowRadio()">  
			</td>
		  </tr>
	</table>
</form>
 </BODY>
</HTML>

Open in new window

Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image

vidhubala,

What browser?  I can test this to verify it but I am almost positive most browsers won't let you access just any attribute you make up if it is HTML.  An xml page and parse would of course be different but I don't know that it will work in this case.  In the past when I have read about storing custom attributes/values or done it myself in html I have used the class attribute.  That can take multiple values, separated by a space, and can be handy for something like what you seem to want to do.

Let me know if you have any questions or need more information.   I can't confirm or elaborate now but I will be happy to look into this more if you need and provide details on anything you want.

b0lsc0tt
vidhubala,

The best change you have would be to try to use the "attributes" collection.  In your code it would be used like ...

attributes[0].value

Instead of where you used "tree"

Let me know how that works if it does.  Let me know if you have a question.

b0lsc0tt
Avatar of vidhubala
vidhubala

ASKER

thanks for ur valuable information. so what will be ur suggestion in my case?
instead of the attribute tree what else do u suggest to get the result?
just need to know how to diff between the parent tree level and child level.
need to do functionality based on the selection. any further advice will be greatly appreciated.

thanks
Did you try using attributes[0] (my last comment)?

What is the custom attribute used for exactly?  I am afraid I can't really provide an alternative without a better idea of what it is meant for and does.

The suggestion to use class (e.g. <tr class="1">) is the best I can do without any details.  Maybe that will work just fine.  That attribute doesn't have to be unique and is usually important for CSS.  If you don't need style "control" for the tr tags and can use those values doing this could be a great option.

You would then get the value with element.className.

Let me know if you have a question or need more info.

bol
attributes[0].value did not work. the attribute 'tree' is used for tree structure. if its 0 its the first level and if its 1 its the child level and so on.. i tried class, doesnt work either, also  class=1 is very confusing.  pl suggest.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	  function selRowRadio() {
		for(i=0;i<document.form1.grRadio.length;i++){
				if(document.form1.grRadio[i].checked){								
						//alert('The selected radio button is: '+document.form1.grRadio[i].value);
						//var tree=document.form1.grRadio[i].parentNode.parentNode.tree.value;
						//var tree=document.getElementById(document.form1.grRadio[i].parentNode.parentNode.tree).value;
						//var tree=document.getElementById(document.form1.grRadio[i].parentNode.parentNode.attributes[0]).value;
						var tree=document.getElementsByClassName(document.form1.grRadio[i].parentNode.parentNode.className).value;
						alert(tree);
						if (tree =='0')	{
							alert('parent')
						}								
						if (tree =='1') {
							alert('child')
						}
					}			
				}		
			}
  //-->
  </SCRIPT>
 </HEAD>
 <BODY>
 <form name="form1">
  <table id=t  width="200px" border=1>
		<tbody>
		 <tr>
			<th width=20></th>
			<th>Time</th>
			<th>Date</th>
		 </tr>		  
		 <tr class='0' tree="0">
			<td width=20><INPUT type=radio NAME="grRadio"  id="gr0" VALUE="hello"></td>
			<td>11</td>
			<td>12/12/2007</td>		
		  </tr> 
		  <tr class='1' tree="1">
			<td width=20><INPUT  type=radio NAME="grRadio"  id="gr1" VALUE="hello"></td>
			<td>23</td>
			<td>2/12/2008</td>		
		  </tr>
		  <tr class='1' tree="1">
			<td width=20><INPUT type=radio  NAME="grRadio"  id="gr2" VALUE="hello"></td>
			<td>8</td>
			<td>1/12/2008</td>		
		  </tr>
		  <tr class='0' tree="0">
			<td width=20><INPUT type=radio NAME="grRadio"  id="gr3" VALUE="hello"></td>
			<td>12</td>
			<td>12/12/2005</td>		
		  </tr> 
		  <tr class='1' tree="1">
			<td width=20><INPUT  type=radio NAME="grRadio"  id="gr4" VALUE="hello"></td>
			<td>2</td>
			<td>2/12/2004</td>		
		  </tr>
		  <tr class='1' tree="1">
			<td width=20><INPUT type=radio  NAME="grRadio"  id="gr5" VALUE="hello"></td>
			<td>1</td>
			<td>1/12/2003</td>		
		  </tr>
		  <tr>
			<td colspan="3">
				<INPUT TYPE="button" value="selected row" value="selected row" onclick="selRowRadio()">  
			</td>
		  </tr>
	</table>
</form>
 </BODY>
</HTML>

Open in new window

That wasn't quite how I meant for it to be used.  I did find out that using a specific index number (e.g. 0) will be hard because attributes is different in different browsers.  It does allow using the name instead of the index number and that works well.

I made a change to how you call the function but that was really a key to the fix.  The main fix is just in one line below but I do recommend you use the form object in the function.  It makes the code shorter.

The main fix is:

      var tree = frm.grRadio[i].parentNode.parentNode.attributes['tree'].value;

Let me know how that works or if you have a question.

bol
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	  function selRowRadio(frm) {
		for(i=0;i<frm.grRadio.length;i++){
				if(frm.grRadio[i].checked){								
						var tree = frm.grRadio[i].parentNode.parentNode.attributes['tree'].value;
						alert(tree);
						if (tree =='0')	{
							alert('parent')
						}								
						if (tree =='1') {
							alert('child')
						}
					}			
				}		
			}
  //-->
  </SCRIPT>
 </HEAD>
 <BODY>
 <form name="form1">
  <table id=t  width="200px" border=1>
		<tbody>
		 <tr>
			<th width=20></th>
			<th>Time</th>
			<th>Date</th>
		 </tr>		  
		 <tr class='0' tree="0">
			<td width=20><INPUT type=radio NAME="grRadio"  id="gr0" VALUE="hello"></td>
			<td>11</td>
			<td>12/12/2007</td>		
		  </tr> 
		  <tr class='1' tree="1">
			<td width=20><INPUT  type=radio NAME="grRadio"  id="gr1" VALUE="hello"></td>
			<td>23</td>
			<td>2/12/2008</td>		
		  </tr>
		  <tr class='1' tree="1">
			<td width=20><INPUT type=radio  NAME="grRadio"  id="gr2" VALUE="hello"></td>
			<td>8</td>
			<td>1/12/2008</td>		
		  </tr>
		  <tr class='0' tree="0">
			<td width=20><INPUT type=radio NAME="grRadio"  id="gr3" VALUE="hello"></td>
			<td>12</td>
			<td>12/12/2005</td>		
		  </tr> 
		  <tr class='1' tree="1">
			<td width=20><INPUT  type=radio NAME="grRadio"  id="gr4" VALUE="hello"></td>
			<td>2</td>
			<td>2/12/2004</td>		
		  </tr>
		  <tr class='1' tree="1">
			<td width=20><INPUT type=radio  NAME="grRadio"  id="gr5" VALUE="hello"></td>
			<td>1</td>
			<td>1/12/2003</td>		
		  </tr>
		  <tr>
			<td colspan="3">
				<INPUT TYPE="button" value="selected row" value="selected row" onclick="selRowRadio(this.form)">  
			</td>
		  </tr>
	</table>
</form>
 </BODY>
</HTML> 

Open in new window

thanks bol.
it works fine in firefox. but ie fails :(  no alert messages coming in ie.
ASKER CERTIFIED SOLUTION
Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
yes i used ur code above. may be my ie corrupted? even in editplus editor failed! i use ie 7.
Do you get any alert?  The tree alert?  What does it have in it?

Try IE 7 on another computer if you can.  I just retried the code copying what I posted and it still works for me.  If you still have a problem and don't get the tree alert then add alerts earlier in the function to see what happens.

bol
downgraded to ie 6 and it works great. may be my ie 7 got corrupted after installing dev addons!  thank you.
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol