如何在连接到我的 sql 的反应表 crud 中添加 2 个箭头，一个顶部箭头按钮和一个底部箭头按钮？

Question

正文字符至少 30 个字符

Answer 1

您可以创建一个图标，然后使用类transform: rotate 它。然后使用定位设置您的元素项目。

在父元素中嵌入图标，然后将父元素设置为position: relative，然后在箭头上，设置它们的position:absolute，然后设置它们的left和top 位置 相对 到父元素。

对于 JS，在箭头类上使用循环，然后检查 classList 是否为 up 或 向下，使用event.target获取被点击的元素。

我在 parentNode 上使用 数据集 来表明 event.target 正在工作。 p>

const arrows = document.querySelectorAll('.arrow')

function upDown(e) {
  if (e.target.classList.contains('up')) {
    console.log('up', e.target.parentNode.dataset.id)
  }
  if (e.target.classList.contains('down')) {
    console.log('down', e.target.parentNode.dataset.id)
  }
}

arrows.forEach(arrow => {
  arrow.addEventListener('click', upDown)
})

body {
   margin: 0;
   padding:0;
}

table {
 width: 100vw;
}

th {
  border: solid 2px black;
  padding-left: 1rem;
  position: relative;
  font-family: sans-serif;
}

th:nth-of-type(2){
  width: 9rem;
}

.arrow {
  border: solid black;
  border-width: 0 2.5px 2.5px 0;
  display: inline-block;
  padding: 2.5px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  position: absolute;
  left: 9rem;
  top: .2rem;
  cursor: pointer;
}

.up:hover {
  border: solid red;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2.5px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: absolute;
  left: 9rem;
  bottom: .2rem;
  cursor: pointer;
}

.down:hover {
  border: solid red;
  border-width: 0 2.5px 2.5px 0;
  display: inline-block;
  padding: 2.5px;
}

<table>
  <tr>
    <th>Contact 1 info: John Doe</th>
    <th class="cont" data-id="John Doe">Contacted 1
      <i class="arrow up"></i>
      <i class="arrow down"></i>
    </th>
  </tr>
  
</table>