asked on

Hide table data

Hi Guys

I need to modify an existing javascript function - which is called in a Classic ASP script

//Javascript code
    function EC(TheTR) {
        var DataTR = eval('document.all.' + TheTR);
        if (DataTR.style.display == "block" || DataTR.style.display == "") {
            DataTR.style.display = "none";
        }
        else {
            DataTR.style.display = "block";
        }
    }

Open in new window

I call it like this

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table border="1" cellpadding="1" cellspacing="1">
    <tr height="26px" >
        <td id="eListing0" valign='top'>Information<br /></td>
      <td  valign='top' width="10px"><img src="http://rosemax.com.au/HorseRecords/images/chevron_left.gif" border="0" title="Click to hide the left side bar" onclick="Javascript:EC('eListing0');EC('eListing1');" style="cursor:hand"></td>
        <td height="26px"valign='top' width="800px">Heading</td>
    </tr>
    <tr>
        <td  id="eListing1" valign="top" align="left">C </td>
        <td valign='top' align="left">D </td>
        <td valign='top' align="left">E </td>
    </tr>
</table>
  
</body>
</html>

Open in new window

What I would like to do with the javascript function is rather than call it twice to hide the td's eListing0 and eListing1 (see onClick event of the image), is have it itinerate through the td by its object id with a number on the end of it - ie eLising0, eListing1 etc.

I have uploaded the code and html to http://jsbin.com/EKIGik/2/edit

MTIA

DWE

ASKER CERTIFIED SOLUTION