如何選擇表格的行ID？

我有以下形式的簡單表：如何選擇表格的行ID？

<table> 
: 
<tr class="main" id="row1"><td><a href="#" class="showstuff">Assignment 1</a></td></tr> 
<tr class="detail hide"><td>... detail about Assignment 1...</td></tr> 
<tr class="main" id="row2"><td><a href="#" class="showstuff">Assignment 2</a></td></tr> 
<tr class="detail hide"><td>... detail about Assignment 2...</td></tr> 
: 
</table>

我想表明與點擊分配相關聯的細節，我的理解，需要形式$的東西（這）.parent（） .next（）選擇下一行。但是，我無法選擇當前行。在試圖調試這個問題時，我嘗試瞭解當前行的id，但只是返回「undefined」。我的代碼是：

$(document).ready(function(){ 
    $(document).on("click",'a.showstuff',function(){toggleDetail();return false;}); 
}); 
function toggleDetail(){ 
var abc = $(this).parent().attr('id'); 
console.log(abc) 
};

我的方法在哪裏？

感謝/ B

來源

2013-06-23 Bruce

爲ID開頭存儲''字符串'+數字'值是以imo開頭的不好方法。如果你有一張桌子，你可能會有一些JavaScript對象來支持它。將事件處理程序添加到這些對象的閉包範圍中（或以其他方式創建綁定），並檢查JS對象的值，而不是嘗試在DOM上存儲應用程序狀態。 –

.parent()將只匹配直接父元素（即，一個級別上）。既然你是你的處理器結合a元素（即嵌套在td進一步下降），你將需要使用.closest()（將「冒泡」了整個DOM樹，直到它的第一場比賽），而不是像：

$(this).closest('tr').attr('id');

閱讀.closest()，.parent()的文檔，並做檢查了.parents()

編輯：

與您的代碼的第二個問題是，你失去了事件處理程序的CON文本時從處理程序中調用toggleDetail()方法。無論是移動你的方法的內容的處理程序中：

$(document).on('click', 'a.showstuff', function(){ 
    console.log($(this).closest('tr').attr('id')); 
    return false; 
});

或將元素：

$(document).on('click', 'a.showstuff', function(){ 
    toggleDetail(this); 
    return false; 
}); 

function toggleDetail(el){ 
    console.log($(el).closest('tr').attr('id')); 
}

來源

2013-06-23 11:32:10 m90

感謝m90，但是當我嘗試$（this）.closest（'tr'）。attr（'id'）時，我仍然在迴應中提供了'undefined'。 – Bruce

它作爲JSFiddle工作：http://jsfiddle.net/mHszj/使用您的標記 – m90

除此之外，我剛剛注意到，因爲您從匿名處理函數內調用'toggleDetail'，this'不會是'toggleDetail'中的錨元素，但沒有'id'的'window'元素，因此它返回undefined。看到這個：http://jsfiddle.net/mHszj/1/ – m90

a標籤的父元素是td到你沒有給任何id屬性。所以，結果是undefined。你實際上給了id到tr這是兩個級別的元素。您應該實際執行以下操作：

來源

2013-06-23 11:37:30

如何選擇表格的行ID？

回答

相關問題