Javascript 表中每行的“显示/隐藏”按钮

我在桌子的每一行有两个按钮。您首先看到按钮1。单击按钮1时，它将消失，并弹出按钮2。这很简单，但我不明白如何为每一行单独创建此行为。现在它只适用于第一行

var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );

我创建了一个代码笔来更好地说明这一点：

我只知道如何使用他们的id来执行此操作，因此它只适用于第一行

var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );

---

您将如何使此行为单独适用于每一行？谢谢

因为id必须是唯一的值

document.getElementById（）

将获取第一个值；我认为您可以将id更改为class，并添加一个param（witch row）来切换函数。或者在使用js获取Sbiling节点的toggle函数中

正如您所说的jQuery，事情变得非常简单。只需将ID替换为类，对于单击的每个按钮，获取其父级范围内的第二个（即行）

---

正如@casimiryang所说，问题在于ID。页面上只能有1个ID相同的元素

因此，为了解决这个问题，您可以使用类，并通过jQuery添加click事件处理程序

$(".first").on("click", function(){
  $(this).hide();
  $(this).next().show();
});

$(".second").on("click", function(){
  $(this).hide();
  $(this).prev().show();
});

---

这是代码笔：

页面上有jQuery吗？或者你想要一个纯JS解决方案？jQuery会小得多。是的，我有jQuery