<td> 使用 jQuery 返回隐藏值

它在正文中有更多的行，在实际示例中具有实际值(它根据搜索添加来自 API 的结果(。

我想单击一行，并希望首先返回该行中跟踪 ID 的值console.log。它隐藏在 CSS 中：

$("tbody").click(function() {
var $songId = $(this).closest("tr").find(".hidden").text();
console.log($songId);
});

.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="song-table" id="results-table">
<thead>
<tr>
<th class="subtitle-text">Track</th>
<th class="subtitle-text">Artist</th>
<th class="subtitle-text">Album</th>
<th class="hidden" id="song-id">ID</th>
</tr>
</thead>
<tbody id="search-results-body">
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID </td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID </td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID </td>
</tr>
</tbody>
</table>

这在控制台中返回为空白，我猜这是因为从技术上讲不存在文本。如果我改用html()，它会返回"未定义"。

任何地方都可以帮我返回隐藏行的值吗？

来自 jQuery 文档中关于.closest()：

给定一个表示一组 DOM 元素的 jQuery 对象，.closest(( 方法在 DOM 树中搜索这些元素及其祖先，并从匹配的元素构造一个新的 jQuery 对象。

因此，您实际上永远不会在表中获得tr元素，因为您实际上是在告诉它查找表的父tr，而该父

显然不存在。

我想

单击一行，并希望返回该行中跟踪 ID 的值

然后，您必须将事件附加到行tr如下所示：

$("tr").click(function() {
var $songId = $(this).find(".hidden").text();
console.log($songId);
});

.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="song-table" id="results-table">
<thead>
<tr>
<th class="subtitle-text">Track</th>
<th class="subtitle-text">Artist</th>
<th class="subtitle-text">Album</th>
<th class="hidden" id="song-id">ID</th>
</tr>
</thead>
<tbody id="search-results-body">
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 1</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 2</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 3</td>
</tr>
</tbody>
</table>

你想要这个吗？

$("tbody td").click(function(){
var $songId = $(this).closest("tr").find(".hidden").text();
console.log($songId);
});

.hidden {
display:none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="song-table" id ="results-table">
<thead>
<tr>
<th class="subtitle-text">Track</th>
<th class="subtitle-text">Artist</th>
<th class="subtitle-text">Album</th>
<th class="hidden" id="song-id">ID</th>
</tr>
</thead>
<tbody id="search-results-body">
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 1</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 2</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 3</td>
</tr>
</tbody>
</table>

试试这个

$(document).on('click','#results-table tr',function(){
	var allTd=$(this).find('td');

$.each(allTd,function(i,td){
debugger;
	if($(td).hasClass('hidden'))
{
	alert($(td)[0].innerText);
console.log($(td)[0].innerText)
}
});
});

.hidden {
display:none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="song-table" id ="results-table" border="1">
<thead>
<tr>
<th class="subtitle-text">Track</th>
<th class="subtitle-text">Artist</th>
<th class="subtitle-text">Album</th>
<th class="hidden" id="song-id">ID</th>
</tr>
</thead>
<tbody id="search-results-body">
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 1</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 2</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 3</td>
</tr>
</tbody>
</table>

您可以在单击表格行上按类名查找，如下所示

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', 'tbody tr', function(){
var id = $(this).find('.hidden').text();
alert(id)
})
});
</script>
<style>
.hidden {
display:none;
}
</style>
</head>
<body>
<table class="song-table" border="1" id="results-table">
<thead>
<tr>
<th class="subtitle-text">Track</th>
<th class="subtitle-text">Artist</th>
<th class="subtitle-text">Album</th>
<th class="hidden" id="song-id">ID</th>
</tr>
</thead>
<tbody id="search-results-body">
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 1</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 2</td>
</tr>
<tr>
<td>Track name </td>
<td>Artist name </td>
<td>Album name </td>
<td class="hidden">Track ID 3</td>
</tr>
</tbody>
</table>
</body>
</html>

相关内容

最新更新

热门标签：