我需要在 table 的每个 tr 行前加上一个不占用 td 单元格的图标
I need to prepend every tr row of a table with an icon that doesn't ocupy a td cell
我希望我的 table 在不在 td 单元格中的每一行前面都有一个图标,这样当我将鼠标悬停在每一行上时,图标就会淡入。如果我将它添加为 td到我的行,然后我的客户 ID 单元格,它应该是每行中的第一个单元格,将不再是第一个单元格。因此图标会在悬停在每一行前面时“浮动”。
CSS、html 或 jquery,哪个最好,如何实现?
我尝试在第一个 td 前面添加一个 div,但它甚至没有出现在我的 table 中。另外添加一个 td 单元格并使背景和边框为空并不能解决我的问题,因为我的 table 有一个框阴影,已经尝试过,它不太好。
<table>
<tr>
<th>Invoice # <i class="fas fa-angle-down"></i></th>
<th>Client <i class="fas fa-angle-down"></i></th>
<th>Amount <i class="fas fa-angle-down"></i></th>
<th>Balance <i class="fas fa-angle-down"></i></th>
<th>Date <i class="fas fa-angle-down"></i></th>
<th>Status <i class="fas fa-angle-down"></i></th>
<th style="width: 100px">Generate Invoice</th>
</tr>
<tr>
<div><i class="fas fa-angle-down"></i></div><!--this needs to be apart -->
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
考虑以下jQuery解决方案。
$(function() {
$("table > tbody > tr").hover(function(e) {
var pos = $(this).position();
var icon_wrap = $("<div>", {
class: "marker"
}).appendTo("body").hide();
var icon = $("<i>", {
class: "fas fa-angle-down"
}).appendTo(icon_wrap);
icon_wrap.css({
top: (pos.top + 6) + "px",
left: pos.left + "px"
}).fadeIn("fast");
}, function() {
$(".marker").fadeOut("fast", function() {
$(this).remove();
});
});
});
.marker {
width: 8px;
height: 20px;
background-color: #99f;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Invoice # <i class="fas fa-angle-down"></i></th>
<th>Client <i class="fas fa-angle-down"></i></th>
<th>Amount <i class="fas fa-angle-down"></i></th>
<th>Balance <i class="fas fa-angle-down"></i></th>
<th>Date <i class="fas fa-angle-down"></i></th>
<th>Status <i class="fas fa-angle-down"></i></th>
<th style="width: 100px">Generate Invoice</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
这使用 .hover()
,它具有 in
和 out
函数回调。您可以简单地添加 Class 并使用 content: ""
使用 :before
伪元素。使用 jQuery,您可以使用 .fadeIn()
和 .fadeOut()
.
的缓动
我希望我的 table 在不在 td 单元格中的每一行前面都有一个图标,这样当我将鼠标悬停在每一行上时,图标就会淡入。如果我将它添加为 td到我的行,然后我的客户 ID 单元格,它应该是每行中的第一个单元格,将不再是第一个单元格。因此图标会在悬停在每一行前面时“浮动”。
CSS、html 或 jquery,哪个最好,如何实现?
我尝试在第一个 td 前面添加一个 div,但它甚至没有出现在我的 table 中。另外添加一个 td 单元格并使背景和边框为空并不能解决我的问题,因为我的 table 有一个框阴影,已经尝试过,它不太好。
<table>
<tr>
<th>Invoice # <i class="fas fa-angle-down"></i></th>
<th>Client <i class="fas fa-angle-down"></i></th>
<th>Amount <i class="fas fa-angle-down"></i></th>
<th>Balance <i class="fas fa-angle-down"></i></th>
<th>Date <i class="fas fa-angle-down"></i></th>
<th>Status <i class="fas fa-angle-down"></i></th>
<th style="width: 100px">Generate Invoice</th>
</tr>
<tr>
<div><i class="fas fa-angle-down"></i></div><!--this needs to be apart -->
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
考虑以下jQuery解决方案。
$(function() {
$("table > tbody > tr").hover(function(e) {
var pos = $(this).position();
var icon_wrap = $("<div>", {
class: "marker"
}).appendTo("body").hide();
var icon = $("<i>", {
class: "fas fa-angle-down"
}).appendTo(icon_wrap);
icon_wrap.css({
top: (pos.top + 6) + "px",
left: pos.left + "px"
}).fadeIn("fast");
}, function() {
$(".marker").fadeOut("fast", function() {
$(this).remove();
});
});
});
.marker {
width: 8px;
height: 20px;
background-color: #99f;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Invoice # <i class="fas fa-angle-down"></i></th>
<th>Client <i class="fas fa-angle-down"></i></th>
<th>Amount <i class="fas fa-angle-down"></i></th>
<th>Balance <i class="fas fa-angle-down"></i></th>
<th>Date <i class="fas fa-angle-down"></i></th>
<th>Status <i class="fas fa-angle-down"></i></th>
<th style="width: 100px">Generate Invoice</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
这使用 .hover()
,它具有 in
和 out
函数回调。您可以简单地添加 Class 并使用 content: ""
使用 :before
伪元素。使用 jQuery,您可以使用 .fadeIn()
和 .fadeOut()
.