javascript - 表扩展到 "tr:before"

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 事件 添加另一个类来实际显示元素。

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>