點擊獲取表格行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”的drop div標簽。 為此，我需要每個行ID，並將其放在變量@TableRowId上。 我怎樣才能做到這一點？

Answer 1

您傳遞的是clicked button的引用，因此您需要通過獲取其父元素來獲取該元素，其中父節點可以從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; 

檢查ie8的polyfill選項 。

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

這將為您提供最可靠的代碼，因為它不依賴於兩個元素之間的關系（同級/父/子等）。