Please someone Fix this Javascript Code.
This script actually reads the URL Parameter and then depending on the parameter it SHOW/HIDE’s Table rows.
I found out this script on Sack Overflow but when tried it on Dreamweaver, its not working..
Please someone go through the script and fix what is wrong in it….
The Script is: There are two pages here…
First is the First_page.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="Second_page.html?showid=tblRow14">First Row</a><br />
<a href="Second_page.html?showid=tblRow46">Second Row</a><br />
<a href="Second_page.html?showid=tblRow30">Third Row</a><br />
</body>
</html>
and the Second_page.html is as below :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<head>
<style>
#theTable>tbody>tr { display: none; } //hide rows by default
</style>
<script type="text/javascript">
function getUrlVar(varName) { //returns empty string if variable name not found in URL
if (!varName) return ''; //no variable name specified. exit and return empty string
varName = varName.toLowerCase(); //convert to lowercase
var params = location.search; //get URL
if (params == '') return ''; //no variables at all. exit and return empty string
var vars = params.split('?')[1].split('&'); //get list of variable+value strings
for (var i = 0; i < vars.length; i++) { //check each variable
var varPair = vars[i].split('='); //split variable and its value
if (varPair.length > 1) { //has "=" separator
if (varPair[0].toLowerCase() == varName) { //same variable name?
return varPair[1]; //found variable. exit and return its value
} //else: check next variable, if any
} //else: is not an array. i.e.: invalid URL variable+value format. ignore it
}
return ''; //no matching variable found. exit and return empty string
}
function show() {
var value = getUrlVar('showid'); //get variable value
if (!value) return; //variable not found
if (parseInt(value) == NaN) return; //value is not a number
var row = document.getElementById('tblRow' + value); //get the element by ID name
if (!row) return; //element not found
row.style.display = 'inherit'; //set element display style to inherited value (which is visible by default)
}
</script>
</head>
<body onLoad="show();">
<table id="theTable">
<tr id="tblRow14"><td>row ID 14</td></tr>
<tr id="tblRow46"><td>row ID 46</td></tr>
<tr id="tblRow30"><td>row ID 30</td></tr>
</table>
</body>
</html>
Please fix it or help me in finding out a new Javascript code that works same like this does…
Please Help me in this.
The parameter showid in the url must be an integer. Change your links in First_page.html.