单击获取表行ID

Question

我有<td>标记：

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

这个JavaScript函数：

function myFunction() {
   document.getElementById("myDropdown").classList.toggle("show");
}

表格图片：

点击图片图片打开该行的下拉菜单时，我需要获取特定的ID行。

我有一个ID迭代器：@TableRowId获取行号。

Answer 1

假设您有一个表格tr，您可以使用parentNode来检索tr ID：

function myFunction(el) {
  var id = el.parentNode.parentNode.parentNode.id;
  console.log(id);
  var all = document.querySelectorAll('.dropdown-content');
  for (var i = 0; i < all.length; i++) {
     all[i].classList.remove('show');
  }
  document.getElementById(id).querySelector('.dropdown-content').classList.toggle("show");
}

.dropdown-content{
  display: none;
}
.show{
  display: block;
}

<table>
  <tr id='id_1'>
    <td align="center">
      <div class="dropdown">
        <button onclick="myFunction(this)" class="btn btn-default glyphicon glyphicon-picture" id=@TableRowId>Click here</button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#">Show</a>
          <a href="#">Edit</a> 
        </div>
      </div>
  </tr>
  <tr id='id_2'>
    <td align="center">
      <div class="dropdown">
        <button onclick="myFunction(this)" class="btn btn-default glyphicon glyphicon-picture" id=@TableRowId>Click here</button>
        <div id="myDropdown_2" class="dropdown-content">
          <a href="#">Show</a>
          <a href="#">Edit</a> 
        </div>
      </div>
  </tr>
  <tr id='id_3'>
    <td align="center">
      <div class="dropdown">
        <button onclick="myFunction(this)" class="btn btn-default glyphicon glyphicon-picture" id=@TableRowId>Click here</button>
        <div id="myDropdown_3" class="dropdown-content">
          <a href="#">Show</a>
          <a href="#">Edit</a> 
        </div>
      </div>
  </tr>
</table>

Answer 2

尝试在onclick属性onclick="myFunction(this.id)"中将id传递给您的函数。然后更改函数定义以包含该参数function myFunction(id) { ...