Menu
I’m trying to make a table that will hide multiple rows in single js functions… now I put together a way to do it, but it requires multiple id declarations in the functions, is there any way to do it with classes instead of IDs, so that I can have a blanket class that I can use?
See:
[CODE] <!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>Javascript hide table row</title>
</head>
<body>
<script type=”text/javascript”>
function display2B(){
var row = document.getElementById(“T2B-1″);if (row.style.display == ”) row.style.display = ‘none’;else row.style.display = ”;
var row = document.getElementById(“T2B-2″);if (row.style.display == ”) row.style.display = ‘none’;else row.style.display = ”;
}
function display1B(){
var row = document.getElementById(“T1B-1″);if (row.style.display == ”) row.style.display = ‘none’;else row.style.display = ”;
var row = document.getElementById(“T1B-2″);if (row.style.display == ”) row.style.display = ‘none’;else row.style.display = ”;
}
</script>
<p><a href=”javascript: display1B();”>Show / Hide First Base</a></p>
<p><a href=”javascript: display2B();”>Show / Hide Second Base</a></p>
<table width=”300″ border=”1″>
<tr class=”topRow”><th>Name</th><th>Position</th><th>Average</th></tr>
<tr id=”T2B-1″><td>Joe Secondbase</td><td>2B</td><td>.259</td></tr>
<tr id=”T2B-2″><td>Bill Secondbase</td><td>2B</td><td>.292 </td></tr>
<tr id=”T1B-1″><td>Ralph Firstbase</td><td>1B</td><td>.223 </td></tr>
<tr id=”T1B-2″><td>Mickey Firstbase</td><td>1B</td><td>.249 </td></tr>
</table>
</body>
</html>