使整个行可点击

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';"

另一个提示是，您的HTML比php多，因此最好使用多个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 （使用window.location而不是document.location可能以任何一种方式工作，但我一直使用window.location ）到该URL。 这样，您以后就可以更改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">