CODEWITHSUNDEEP
javascripthtmlcssrow
Ballon Ura
Ballon Ura

Reputation: 922

Get the table row id on click

I have this <td> tag:

<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>

And this JavaScript function:

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

Image of the Table:

Image of table

I need to get the specific ID row when click in the picture image to open drop-down menu for that row.

I have an ID iterator: @TableRowId that gets the row number.

Upvotes: 1

Views: 2270

Answers (2)

Ionut Necula
Ionut Necula

Reputation: 11472

Assuming you have a table and tr you can use parentNode to retrieve the 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>

Upvotes: 1

Bastiaanus
Bastiaanus

Reputation: 357

Try passing in the id to your function in the onclick attribute onclick="myFunction(this.id)". Then change your function definition to include that argument function myFunction(id) { ...

Upvotes: 0

Related Questions