使整行可点击答案

【问题标题】：Make entire row clickable使整行可点击
【发布时间】：2016-08-03 03:53:48
【问题描述】：

我正在尝试使表格的整行都可点击。我看过一堆教程，它们看起来都很简单，但我似乎无法让它工作。我尝试了 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>';

【问题讨论】：

标签： php jquery html mysql css

【解决方案1】：

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

这应该是

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

另外一个提示，你的 HTML 比 php 多，所以最好使用多个 php 标签而不是 echo 多次调用。这样就更容易发现此类错误了。

编辑如果您仍在使用 php，您还应该转义撇号

【讨论】：

我试过它只会让整个网站崩溃
@georoot 如果您在文本中添加'，它将结束echo ' - 因此严重崩溃。使用带有 php 标签的 HTML 的另一个原因。
@freedomn-m 这就是我编辑答案的原因；）也应该提到这一点，我认为它已被理解，因为它或多或少是类似的问题

【解决方案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-”前缀表示该类用于绑定功能，不应设置样式。该脚本只是将一个单击事件绑定到表，该事件侦听用户单击具有data-url 属性的表行。发生这种情况时，页面将被重定向（使用window.location 而不是document.location - 它可能以任何一种方式工作，但我一直使用window.location）到该URL。这允许您稍后更改 URL 或按行更改 URL，而无需更改任何 JavaScript。

$(function () {

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

});

希望对你有帮助。

【讨论】：

谢谢！我对此很陌生，我有一些 HTML 经验，但没有 PHP 或 mysql，几乎没有任何 javascript。我什至不知道 jQuery 是什么。我应该把 jQuery 代码块放在哪里？
jQuery 是一个 JavaScript 库。我建议在 jQuery 之前学习 JavaScript，但这超出了这个问题的范围。 jQuery 代码应该放在页面上的<script> ... </script> 标记内（在<head> 标记中或<body> 的底部附近）或添加到外部JavaScript 文件并添加到<head> 标记中表格<script src="..."></script>
@JamesLong 确实值得为所提供的广泛答案投票:)

【解决方案3】：

考虑使用以下代码：

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

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

【讨论】：

【解决方案4】：

我认为您应该尝试使用 JQuery 来做到这一点。

HTML

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

jQuery

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

【讨论】：

【解决方案5】：

请用这个更改您的代码

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

【讨论】：