Question

我试图让表格的整行可以点击。我看过一堆教程，看起来很简单，但我似乎无法让它工作。我试过DoNav并且没有用，简单的onclick属性不起作用，我做错了什么？我使用的是mysql，php和html。谢谢你的帮助！

echo '<table>';
        echo '<tr>';
            echo '<th>Name</th><th>Checked In?</th><th>ID</th>';
        echo '</tr>';
         while($row = $CheckedIn->fetch_assoc()){

            echo '<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this,false);" onclick="document.location="www.engineering.us/gena/details.php";">';
            echo '<td align="left">';

            echo $row['ChildName'];

            echo '</td>';
            echo '<td align="center">';
        ;
            echo $row['checkedin'];

            echo '</td>';
            echo '<td align="center">';

            echo $row['P_Id'];

            echo '</td>';
            echo '</tr>';

    }
    echo '</table>';

Answer 1

onclick="document.location="www.engineering.us/gena/details.php";"

这应该是

onclick="document.location='www.engineering.us/gena/details.php';"

另外一个提示，你有比php更多的HTML，所以最好使用多个php标签而不是多次调用echo。这样就可以轻松找到这样的错误。

修改的如果你还在使用php

，你也应该逃避撇号

Answer 2

从 georoot 所说的内容中提取，在HTML中使用PHP。它使标记更具可读性，通常允许程序添加语法高亮，使其更易于阅读。我添加了两个额外的类（“js-table”和“table-tr”），稍后我会解释一下。另一个重要的一点是，URL位于表格行的新属性中：data-url。

<table class="js-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Checked In?</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($row = $CheckedIn->fetch_assoc()): ?>
        <tr class="table-tr" data-url="http://www.engineering.us/gena/details.php">
            <td><?php echo $row['ChildName']; ?></td>
            <td><?php echo $row['checkedin']; ?></td>
            <td><?php echo $row['P_Id']; ?></td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>

“table-tr”类允许我们在CSS中定位表行。没有必要使用JavaScript来做这么简单的事情。即使在CSS中更改表格单元格中文本的颜色也很容易。这种技术的另一个优点是，无需修改任何HTML，PHP或JavaScript即可轻松更改 - 这是一种纯粹的风格。

.table-tr:hover {
    background-color: red;
}

最后，由于您使用的是jQuery，我们可以利用新的“js-table”类。 “js-”前缀表示该类用于绑定功能，不应对其进行样式设置。此脚本只是将click事件绑定到表，该表监听用户单击具有data-url属性的表行。当发生这种情况时，页面会被重定向（使用window.location代替document.location - 它可以以任何方式工作，但我总是使用window.location）到该网址。这允许您稍后更改URL或每行更改URL，而无需更改任何JavaScript。

$(function () {

    $(".js-table").on("click", "tr[data-url]", function () {
        window.location = $(this).data("url");
    });

});

我希望有所帮助。

Answer 3

我认为您应该尝试使用JQuery。

HTML

<tr class="table-tr"></tr>

JQuery的

$('.table-tr').on('click', function(){
    window.location = "your url here";
});

Answer 4

考虑使用以下代码：

$("#Table tr").click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    var value = $(this).find('td:first').html();
    window.location.href = "url";
});

其中Table是您的表名，url是您要导航到的地址

Answer 5

请使用此

更改您的代码

<tr onclick="window.location.href=www.engineering.us/gena/details.php">

使整行可以点击

5 个答案: