使整行可点击
Posted
技术标签:
【中文标题】使整行可点击【英文标题】：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>';
【问题讨论】：
【参考方案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">
【讨论】：
以上是关于使整行可点击的主要内容，如果未能解决你的问题，请参考以下文章