如何选择表格的行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？

回答

相关问题