如何在Bootstrap中使表格中的整行都可以作为链接点击
Bootstrap中的表格可以使用传统的<table>
标签或使用内置的 “网格 “系统来形成。早期,<table>
标签经常被用来为网站设计网格,但现在有了CSS中的flexbox和表格显示属性,直接使用div就更容易了。
在下面的例子中,我们将看到如何使一个完整的行在两种情况下都可以作为链接点击。
传统的<table>
标签
现在,为了使整个行都能被点击,人们可能会想到把<tr>
标签的内容包装成一个链接(<a>
)元素。但这不会有什么结果。实际上,这是一种无效的HTML方法,应该避免。
我们可以在<tr>
标签上调用onclick方法,然后根据要求导航到任何位置。下面是一个解释如何做到这一点的例子。
在这种情况下,一个示例表格的标记看起来像这样。
<table>
<tr>
<th>IDE</th>
<th>Link</th>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>https://ide.geeksforgeeks.org/Y4U8qx</td>
</tr>
</table>
示例:1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Table Row Clickable</title>
<style>
th {
background: green;
border: 2px solid black;
}
.clickable {
height: 50px;
background: gray;
border: 2px solid black;
}
.clickable:hover {
background: green;
}
</style>
</head>
<body>
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<div class="container">
<table class="w-100">
<tr class="text-center">
<th>IDE</th>
<th>link</th>
</tr>
<tr class="clickable text-center"
onclick="window.location='https://ide.geeksforgeeks.org/Y4U8qx'">
<td>GeeksforGeeks</td>
<td>https://ide.geeksforgeeks.org/Y4U8qx</td>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
输出:
* 在点击该行之前。
* 点击行后。
GeeksforGeeks IDE will open
使用Bootstrap网格系统:
使用Bootstrap网格系统构建表格要比使用<table>
标签容易得多,而且提供了更多的灵活性。
在这种情况下,要使整个行成为可点击的,可以用一个链接<a>
标签来包裹其内容。下面是一个这样做的例子。
前面例子中完全相同的表格可以用Bootstrap重新设计如下。
<div class="row">
<div class="col-6"><b>IDE</b></div>
<div class="col-6"><b>Link</b></div>
<div class="col-6 py-3">GeeksforGeeks</div>
<div class="col-6 py-3">https://ide.geeksforgeeks.org/Y4U8qx</div>
</div>
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Table Row Clickable</title>
<style>
.clickable {
height: 40px;
}
</style>
</head>
<body>
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<div class="container">
<center class="row">
<div style="border:2px solid black"
class="col-6 py-2">
<b>IDE</b>
</div>
<div style="border:2px solid black"
class="col-6 py-2">
<b>Link</b>
</div>
<div style="border:2px solid black" class="col-12">
<a class="row clickable"
href="https://ide.geeksforgeeks.org/Y4U8qx">
<div class="col-5 py-2">
GeeksforGeeks
</div>
<div class="col-5 py-2">
https://ide.geeksforgeeks.org/Y4U8qx
</div>
</a>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
输出:
* 在点击该行之前。
- 点击行后。
GeeksforGeeks IDE will open