Question

我有一个HTML表，如果您单击“ <?php echo $row["title"]; ?>”，则每一行将显示与该标题相对应的练习文本。

这工作正常，可以正确切换，但我不知道为什么它不起作用。标题仅显示在其中一列中，但我想在其中三列中显示。在下面，我张贴一张我得到的照片。

您能帮我解决这个问题吗？

这是我的代码：

<tr>
            <td><?php echo $num_ex; ?></td> 

            <!---Click Toggle Exercise-->
            <td><a  onclick="myFunction(<?php echo $row["exercise_id"] ?>)" role="button" class="btn" target="_blank" ><?php echo $row["title"]; ?></a>
                </td>

            <td><?php echo $row["difficulty"]; ?></td>

</tr>

<!--- Toggle --->
<tr id="toggle<?php echo $row["exercise_id"] ?>"  style="display:none">

    <td colspan="3"> <!---THIS COLSPAN IS NOT WORKING-->

            <?php
            $sql = "SELECT * FROM exercises WHERE exercise_id='".$row["exercise_id"]."'";
            $result_ej = $conn->query($sql); /*Check connection*/
            $row_ej = $result_ej->fetch_assoc();
            ?>

            <p><?php echo $row["exercise_id"] . ". " . $row["text"]?></p>

 </td>
 </tr><!---Finish Toggle --->

这是我的脚本：

  <script>
        function myFunction(ejer_id) {
            var x = document.getElementById("toggle" + ejer_id);
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>

Answer 1

由于您正在更改<tr>的显示，因此需要在需要显示它时对其进行正确设置，否则它将不遵循表结构规则。

问题是：

x.style.display = "block";

应该是：

x.style.display = "table-row";

或者，如果您不想跟踪“正确”值，最好将其取消设置：

x.style.display = "";

免责声明：我不知道所有浏览器是否都将正确支持此第三种选择。

有关其他选项，请参见https://stackoverflow.com/a/7971565/2191572。

您还可以使用：

x.style.display = "initial";

，但并非按https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility

在所有浏览器（例如IE 11和更早版本）中都无法使用

桌子上的Colspan无法正常工作

1 个答案: