Question

你好使用这样的表

我如何制作触发器onClick来删除第一次单击时的边框，然后再次单击将其添加回边框，但这仅应在被单击的行上发生，而不会影响其他边框。我试图在第一个<td>和最后一个*js.Object上添加条件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()

Answer 2

一种方法是检查<td>元素的父级并添加/删除自定义类，如下所示：

function removeBorders(e) {
    var row = e.parentElement;

    if (row.className.indexOf("has-borders") === -1) {
        row.classList.add("has-borders");
    } else {
        row.classList.remove("has-borders");
    }
};

工作中的JSFiddle：https://jsfiddle.net/d380sjrh/

我也将onClick=this.removeBorders()更改为onclick="removeBorders(this);"。

Answer 3

JSFiddle：https://jsfiddle.net/4qdstec7/

使用React的状态来设置和取消设置所选的类。

const Row = ({ children }) => {
  const [selected, setSelected] = useState(false);

  const onClick = e => setSelected(!selected);

  return (
    <tr
      className={selected && 'selected'}
      onClick={onClick}
    >
      {children}
    </tr>
  )
}

在React中进行开发需要从传统的Web开发转变思维。请花一些时间从React团队阅读此excellent post。

onClick删除边框，然后单击下一步再次添加边框CSS，Preact

3 个答案: