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

Question

body characters at least 30 chars

Answer 1

You can create an icon and then transform: rotate it using a class. Then set you elements items using positioning .

Embed the icons in the parent element and then set the parent to position: relative then on the arrows, set their position:absolute and then set their left and top positions relative to the parent element.

For the JS, use a loop on the arrow class and then check classList for up or down , use the event.target to get the element being clicked.

I use a dataset on the parentNode to show that the event.target is working.

 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>