<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Hide Table Rows with onChange()</title>
	<atom:link href="http://www.devlounge.net/code/css-onchange-in-to-make-table-rows-visible/feed" rel="self" type="application/rss+xml" />
	<link>http://www.devlounge.net/code/css-onchange-in-to-make-table-rows-visible</link>
	<description>Design, Develop, and Grow</description>
	<lastBuildDate>Wed, 08 Feb 2012 09:03:06 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<item>
		<title>By: Jose Velez</title>
		<link>http://www.devlounge.net/code/css-onchange-in-to-make-table-rows-visible/comment-page-1#comment-176341</link>
		<dc:creator>Jose Velez</dc:creator>
		<pubDate>Sun, 28 Sep 2008 01:17:51 +0000</pubDate>
		<guid isPermaLink="false">http://www.devlounge.net/?p=1680#comment-176341</guid>
		<description>very good tutorial</description>
		<content:encoded><![CDATA[<p>very good tutorial</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Nick</title>
		<link>http://www.devlounge.net/code/css-onchange-in-to-make-table-rows-visible/comment-page-1#comment-175208</link>
		<dc:creator>Nick</dc:creator>
		<pubDate>Wed, 20 Aug 2008 21:04:15 +0000</pubDate>
		<guid isPermaLink="false">http://www.devlounge.net/?p=1680#comment-175208</guid>
		<description>For accessibility purposes I suggest looping through TR&#039;s with javascript and add the style.visibility = &quot;hidden&quot; so that in the event a user has JavaScript disabled they will still see the table values. See my example below

&lt;code&gt;
function hideRows() {
	var allRows = document.getElementsByTagName(&quot;tr&quot;);
	for (i=0; i &lt; allRows.length; i++) {
		if(allRows[i].id != &quot;option&quot;) {
			allRows[i].style.visibility=&#039;hidden&#039;;
		}
	}
}
function changeRow() {
	var intCount = document.getElementById(&quot;selTest&quot;).options.length; //gets count of items in select menu
	var intValue = document.getElementById(&quot;selTest&quot;).selectedIndex; //gets number (0 index) of selected item
    for (i=0;i&lt;intCount;i++){
        var strValue = document.getElementById(&quot;selTest&quot;)[i].value; //gets value of selected item
        if (i == intValue) {
            document.getElementById(strValue).style.visibility=&#039;visible&#039;;
        }
        else {
            document.getElementById(strValue).style.visibility=&#039;hidden&#039;;
        }
    }
}
// Event Handler
function addEvent(obj, evType, fn) {
	if (obj.addEventListener){ 
		obj.addEventListener(evType, fn, false); 
	return true;
	} 
	else if (obj.attachEvent) {
		var r = obj.attachEvent(&quot;on&quot;+evType, fn);
	return r;
	} 
	else { return false; } 
}
addEvent(window, &#039;load&#039;, hideRows);
&lt;/code&gt;

P.S. Your code snippets are not showing everything. I had to go to demo page to see all the code.</description>
		<content:encoded><![CDATA[<p>For accessibility purposes I suggest looping through TR&#8217;s with javascript and add the style.visibility = &#8220;hidden&#8221; so that in the event a user has JavaScript disabled they will still see the table values. See my example below</p>
<p><code><br />
function hideRows() {<br />
	var allRows = document.getElementsByTagName("tr");<br />
	for (i=0; i &lt; allRows.length; i++) {<br />
		if(allRows[i].id != "option") {<br />
			allRows[i].style.visibility='hidden';<br />
		}<br />
	}<br />
}<br />
function changeRow() {<br />
	var intCount = document.getElementById("selTest").options.length; //gets count of items in select menu<br />
	var intValue = document.getElementById("selTest").selectedIndex; //gets number (0 index) of selected item<br />
    for (i=0;i&lt;intCount;i++){<br />
        var strValue = document.getElementById("selTest")[i].value; //gets value of selected item<br />
        if (i == intValue) {<br />
            document.getElementById(strValue).style.visibility='visible';<br />
        }<br />
        else {<br />
            document.getElementById(strValue).style.visibility='hidden';<br />
        }<br />
    }<br />
}<br />
// Event Handler<br />
function addEvent(obj, evType, fn) {<br />
	if (obj.addEventListener){<br />
		obj.addEventListener(evType, fn, false);<br />
	return true;<br />
	}<br />
	else if (obj.attachEvent) {<br />
		var r = obj.attachEvent("on"+evType, fn);<br />
	return r;<br />
	}<br />
	else { return false; }<br />
}<br />
addEvent(window, 'load', hideRows);<br />
</code></p>
<p>P.S. Your code snippets are not showing everything. I had to go to demo page to see all the code.</p>
]]></content:encoded>
	</item>
</channel>
</rss>

