クリックで表の行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"で表示します。これを行うには、各行IDが必要です。変数@TableRowIdにそのIDがあります。どうやってやるの？

Answer 1

あなたは親ノードがparentNodeプロパティから取得することができ、その親要素を取得することによって要素を取得する必要がありますので、あなたは、クリックされたボタンの参照を渡しています。 FYI

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'); 
} 

これは、2つの要素の間の関係（兄弟/親/子など）に依存しないためです。