javascript - onClick 删除边框并在下一次单击时再次添加它们 CSS,Preact

Question

你好，使用像这样的表格

https://jsfiddle.net/vw19pbfo/24/

我怎样才能触发 onClick在第一次点击时删除边框，在第二次点击时将边框添加回去，但这应该只发生在被点击的行上，不会影响其他行。我试图在第一个和最后一个 <td> 上使用条件 css但这影响了每个边框，但我只想影响点击的边框

Answer 1

function removeBorders(e){
  var target = e.target || e.srcElement;
  target.parentElement.classList.toggle('without-border');
};

工作 JSFiddle:https://jsfiddle.net/andrewincontact/su86fhxo/9/

变化:

1) 到 CSS:

.my-table-row.without-border td {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

2) 到 html:

onclick=removeBorders(event) instead  onClick=this.removeBorders()