獲取上單擊錶行ID（HTML + JS）

我有這樣的標籤：獲取上單擊錶行ID（HTML + JS）

<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上。我怎樣才能做到這一點？

來源

2016-12-29 Ballon Ura

該div是元素的下一個同級，而不是孩子。所以你想要element.nextSibling而不是element.querySelector。 – Shilly

'@ TableRowId'不是一個有效的ID –

你的桌子在哪裏？你的行在哪裏？我們沒有看到它們。 –

你傳入點擊按鈕的參考，所以你需要通過獲得它的父元素，其中父節點可以從parentNode屬性來獲取得到的元素。

function DropdownShow(element) { 
    var elm = element.parentNode.querySelector('.dropdown-content') 
    elm.classList.toggle('show'); 
}

FYI：如果沒有空白按鈕後，那麼你可以使用nextSibling屬性來獲取元素。

var elm = element.nextSibling;

或使用 nextElementSibling屬性來獲得元素，甚至有一個文本節點。

var elm = element.nextElementSibling;

檢查polyfill option for ie8。

來源

2016-12-29 12:52:46

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

這將會給你最可靠的代碼，因爲它不依賴於兩個元素之間的關係（兄弟姐妹/父母/孩子等）。

來源

2016-12-29 12:54:35 user3432422

仍然沒有工作，我試圖找到爲什麼:) –

獲取上單擊錶行ID（HTML + JS）

回答

相關問題