javascript - 切换表格单元格内的数据显示

Question

我有一个由普通 PHP 循环生成的表。我想要做的是在每行的第一列中创建一个表单，该表单默认情况下是隐藏的，但当您单击该行中的切换链接时会出现。

我可以通过创建一个名为 hidden 的 CSS id 并设置 display: none; 来制作一个普通的可切换 div。不幸的是，我无法继续使用自动与前面的链接关联的 id=hidden 创建 div。

我对 Javascript 和 CSS 都没有经验，所以我主要尝试通过拼凑示例来做到这一点，但我一无所获。我在某些地方读到不能将 div 放在表格中，所以也许我的做法全错了。

这是代码的作用以及我希望它如何工作的示例，但它当然没有。

<script language="JavaScript" type="text/javascript">
    function toggle(id) {
        var state = document.getElementById(id).style.display;
            if (state == 'block') {
                document.getElementById(id).style.display = 'none';
            } else {
                document.getElementById(id).style.display = 'block';
            }
        }
</script>


<?php

while($array = mysql_fetch_array($sql))
    {
?>
<tr>
    <td>
<?php
        echo $array['some_data'];
?>
        <a href="#" onclick="toggle('hidden');">Toggle</a>
        <div id="hidden"><?php echo $array['hidden_thing']; ?></div>
    </td>
    <td>
        <?php echo $array['some_other_data']; ?>
    </td>
</tr>
<?php
    }
?>

Answer 1

只需为每一行使用不同的 ID:

<?php
$count = 0;
while($array = mysql_fetch_array($sql)) {
  $id = 'hidden' . $count++;
  $data = $array['some_data'];
  $hidden = $array['hidden_thing'];
  $other_data = $array['other_data'];
  echo <<<END
<tr>
  <td>$data <a href="#" onclick="toggle('$id');>Toggle</a>
    <div id="$id">$hidden_thing</div>
  </td>
  <td>$other_data</td>
</tr>

END;
}