Skjule / vise table rows

Hejsa,

Jeg har en tabel hvor jeg skal have mulighed for at skjule eller vise rows alt efter hvad der bliver klikket på.

Dette virker :

<head>
    <title>Test</title>
<script>
<!--
    function showDetails(id) {
        eval(\'document.all.td\' + id + \'.style.display = \"block\"\');       
    }

    function hideDetails(id) {
        eval(\'document.all.td\' + id + \'.style.display = \"none\"\');       
    }
-->
</script>

</head>

<body>

<table>
    <tr>
        <td><a href=\"java script:showDetails(1);\">Vis</a> / <a href=\"java script:hideDetails(1);\">Skjul</a></td>
    </tr>
    <tr>
        <td id=\"td1\" style=\"display:none;\">Details til 1</td>
    </tr>
    <tr>
        <td><a href=\"java script:showDetails(2);\">Vis</a> / <a href=\"java script:hideDetails(2);\">Skjul</a></td>
    </tr>
    <tr>
        <td id=\"td2\" style=\"display:none;\">Details til 2</td>
    </tr>
</table>

</body>

men problemet er at jeg gerne vil have flere rows til at reagere på et klik, men hvis man laver flere <td> med samme id, så fejler det... har i nogen forslag ???