单击获取表行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');
}

当我点击表格中的图像glyphicon时，我想要显示带有class =“dropdown-content”的下拉div标签。要做到这一点，我需要每一行ID，我在变量@TableRowId上。我怎么能这样做？

Answer 1

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

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。

Answer 2

我会将@TableRowId作为数据属性传递给按钮：

<td align="center">
   <div class="dropdown">
      <button data-dropdown-content-id="@TableRowId" 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>

然后你的javascript就是：

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

这将为您提供最强大的代码，因为它不依赖于两个元素之间的关系（兄弟/父/子等）。