请有人修复此SHOW / HIDE表Javascript代码

时间:2012-08-29 16:22:58

标签: javascript html-table hide dreamweaver show

请有人修复此Javascript代码。

这个脚本实际上读取了URL参数,然后根据参数SHOW / HIDE的表行。

我在Sack Overflow上找到了这个脚本,但是在Dreamweaver上试用它时,它无法正常工作..

请有人浏览脚本并修复其中的错误....

脚本是:这里有两页......

首先是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>

Second_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>
<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>

请修复它或帮我找到一个与此类似的新Javascript代码...

请帮助我。

2 个答案:

答案 0 :(得分:0)

“value”变量已经具有的id。所以,只需改变这一行:

var row = document.getElementById(value); 

它会起作用。

答案 1 :(得分:0)

url中的参数showid必须是整数。在First_page.html中更改您的链接。

<a href="Second_page.html?showid=14">First Row</a><br />
<a href="Second_page.html?showid=46">Second Row</a><br />
<a href="Second_page.html?showid=30">Third Row</a><br />