javascript - 点击获取表格行id(HTML+JS)

Question

我有这个标签:

<td align="center">
   <div class="dropdown">
      <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button>
      <div id="@TableRowId" class="dropdown-content">
         <a href="#">Show</a>
         <a href="#">Edit</a> 
      </div>
   </div>
</td>

和JS函数:

function DropdownShow(element) {
  var elm = document.getElementById(element.querySelector(".dropdown-content").id);
  elm.classList.toggle('show');
}

我希望当我点击表格中的图像字形时，显示带有 class="dropdown-content"的下拉 div 标签。为此，我需要每一行 ID，并将其保存在变量 @TableRowId 中。我该怎么做？

Answer 1

您正在传递单击按钮的引用，因此您需要通过获取其父元素来获取该元素，其中父节点可以从 parentNode 获取属性(property)。

function DropdownShow(element) {
  var elm = element.parentNode.querySelector('.dropdown-content')
  elm.classList.toggle('show');
}

---

仅供引用:如果按钮后没有空格，那么您可以使用 nextSibling获取元素的属性。

var elm = element.nextSibling;

---

或使用 nextElementSibling即使有文本节点也可以获取元素的属性。

var elm = element.nextElementSibling;

检查 polyfill option for ie8 .