Question

我正在尝试在我正在处理的表上实现某种选择效果。我想通过向用户单击的表行添加一个类来实现此目的。添加到行的类将在行的左侧添加一个小圆圈。但是，当我将类添加到行时，表（或行）似乎会扩展几个像素。我无法弄清楚为什么。

一些示例代码来说明我的问题：

document.querySelector('tr').addEventListener('click', function() {
  if (!this.classList.contains('clicked')) {
    this.classList.add('clicked');
    return;
  }

  this.classList.remove('clicked');
});

table {
  position: relative;
  background: #ccc;
  margin: 5rem auto;
}
.clicked:before {
  position: absolute;
  content: '';
  right: 100%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: yellow;
}

<table>
  <tr>
    <td>1</td>
    <td>Two</td>
    <td>3</td>
    <td>Four</td>
    <td>1</td>
    <td>Longer text..</td>
    <td>3</td>
    <td>Four</td>
  </tr>
</table>

非常感谢任何帮助！

Answer 1

您可以添加clicked:before元素并将其设置为opacity至0，然后在click event添加另一个类以实际显示该元素。

document.querySelector('tr').addEventListener('click', function() {
  if (!this.classList.contains('show-clicked')) {
    this.classList.add('show-clicked');
    return;
  }

  this.classList.remove('show-clicked');
});

table {
  position: relative;
  background: #ccc;
  margin: 5rem auto;
}

tr {
  margin-left: 10px;
}

.clicked:before {
  position: absolute;
  content: '';
  right: 100%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: yellow;
  opacity: 0;
}

.show-clicked:before {
  opacity: 1;
}

<table>
  <tr class="clicked">
    <td>1</td>
    <td>Two</td>
    <td>3</td>
    <td>Four</td>
    <td>1</td>
    <td>Longer text..</td>
    <td>3</td>
    <td>Four</td>
  </tr>
</table>

Answer 2

我有一个技巧。我希望它能像你想要的那样工作

document.querySelector('tr').addEventListener('click', function() {
  if (!this.classList.contains('clicked')) {
    this.classList.add('clicked');
    return;
  }

  this.classList.remove('clicked');
});

table {
  position: relative;
  background: #ccc;
  margin: 5rem auto;
}
.show-me {
  width: 10px;
  height: 10px;
  border: 0;
  background-color: transparent;
}
.show-me span {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: yellow;
}
.clicked .show-me span {
   display: block; 
}

   
<table>
      <tr>
        <td class="show-me">
          <span></span>
        </td>
        <td>1</td>
        <td>Two</td>
        <td>3</td>
        <td>Four</td>
        <td>1</td>
        <td>Longer text..</td>
        <td>3</td>
        <td>Four</td>
      </tr>
</table>

Answer 3

您可以使用css visibility属性和一个额外的类。这样，由::before引起的任何效果都将在渲染中，但只是不可见。

摘要可见性属性可用于隐藏元素离开原来的空间。它也可以隐藏行或一列表。

＆＃13;

document.querySelector('tr').addEventListener('click', function () {
    this.classList.toggle('visible');
});

＆＃13;

table {
    position: relative;
    background: #ccc;
    margin: 5rem auto;
}
.clicked::before {
    position: absolute;
    content:'';
    right: 100%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: yellow;
    visibility: hidden;
}
.visible::before {
    visibility: visible;
}

＆＃13;

<table>
    <tr class="clicked">
        <td>1</td>
        <td>Two</td>
        <td>3</td>
        <td>Four</td>
        <td>1</td>
        <td>Longer text..</td>
        <td>3</td>
        <td>Four</td>
    </tr>
</table>

＆＃13;

Answer 4

这篇文章帮助我解决了这个问题。似乎：在实际上＆＃34;创造＆＃34;一个新的表格单元格。不得不在我的代码中添加：before到第一个而不是。

Is it possible to user pseudo-element (:after, :before) on table row safely?

表格展开“tr：before”

4 个答案: