我需要在 table 的每个 tr 行前加上一个不占用 td 单元格的图标

Question

我希望我的 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>

Answer 1

考虑以下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 的每个 tr 行前加上一个不占用 td 单元格的图标

I need to prepend every tr row of a table with an icon that doesn't ocupy a td cell

html

jquery

css

css-tables