Javascript 返回隐藏的<；td>；使用jQuery的值_Javascript_Jquery_Html

Javascript 返回隐藏的<；td>；使用jQuery的值

javascript jquery html

Javascript 返回隐藏的<；td>；使用jQuery的值,javascript,jquery,html,Javascript,Jquery,Html,它在tbody中有更多的行，在实际示例中有实际值（它根据搜索添加来自API的结果）我想单击一行，并希望首先通过console.log返回该行中曲目ID的值。它隐藏在CSS中： $（“tbody”）。单击（函数（）{ var$songId=$（this.closest（“tr”）.find（“.hidden”）.text（）； console.log（$songId）； }); 。隐藏{ 显示：无； } 跟踪艺术家专辑身份证件音轨名称艺人名称唱片集名称轨道ID 音轨名称艺人名

它在tbody中有更多的行，在实际示例中有实际值（它根据搜索添加来自API的结果）

我想单击一行，并希望首先通过

console.log

返回该行中曲目ID的值。它隐藏在CSS中：

$（“tbody”）。单击（函数（）{
var$songId=$（this.closest（“tr”）.find（“.hidden”）.text（）；
console.log（$songId）；
});
。隐藏{
显示：无；
}

跟踪
艺术家
专辑
身份证件
音轨名称
艺人名称
唱片集名称
轨道ID
音轨名称
艺人名称
唱片集名称
轨道ID
音轨名称
艺人名称
唱片集名称
轨道ID
您想要这个吗

$（“tbody td”）。单击（函数（）{
var$songId=$（this.closest（“tr”）.find（“.hidden”）.text（）；
console.log（$songId）；
});
。隐藏{
显示：无；
}

跟踪
艺术家
专辑
身份证件
音轨名称
艺人名称
唱片集名称
轨道ID 1
音轨名称
艺人名称
唱片集名称
轨道ID 2
音轨名称
艺人名称
唱片集名称
轨道ID 3

我想单击一行，并希望返回该行中轨迹ID的值
然后您必须将事件附加到行tr
上，如：

$（“tr”）。单击（函数（）{
var$songId=$（this.find（“.hidden”）.text（）；
console.log（$songId）；
});
。隐藏{
显示：无；
}

跟踪
艺术家
专辑
身份证件
音轨名称
艺人名称
唱片集名称
轨道ID 1
音轨名称
艺人名称
唱片集名称
轨道ID 2
音轨名称
艺人名称
唱片集名称
轨道ID 3
来自jQuery文档，关于：
给定一个表示一组DOM元素的jQuery对象，.closest（）方法在DOM树中搜索这些元素及其祖先，并从匹配的元素构造一个新的jQuery对象
因此，您实际上从未在表中获得tr
元素，因为您实际上是在告诉它查找表的父tr
，而父tr显然不存在。
试试这个

$（document）.on（'click'，'#results table tr'，function（）{
var allTd=$（this.find（'td'）；
$。每个（所有td，功能（i，td）{
调试器；
if（$（td）.hasClass（'hidden'））
{
警报（$（td）[0]。innerText）；
console.log（$（td）[0].innerText）
}
});
});
。隐藏{
显示：无；
}

跟踪
艺术家
专辑
身份证件
音轨名称
艺人名称
唱片集名称
轨道ID 1
音轨名称
艺人名称
唱片集名称
轨道ID 2
音轨名称
艺人名称
唱片集名称
轨道ID 3
您可以按类名在单击表行中找到，如下所示
<!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>


$（文档）.ready（函数（）{
$（文档）。在（'click'，'tbody tr'，function（）上{
var id=$（this.find（'.hidden'）.text（）；
警报（id）
})
});
.隐藏{
显示：无；
}
跟踪
艺术家
专辑
身份证件
音轨名称
艺人名称
唱片集名称
轨道ID 1
音轨名称
艺人名称
唱片集名称
轨道ID 2
音轨名称
艺人名称
唱片集名称
轨道ID 3
就是这样。原来我还忘了加引号，这让我很困惑。非常感谢！！很高兴我能帮助bro，如果答案是您想要的，请将其标记为未来的读者。您的示例不起作用，因为您将单击处理程序分配给tbody，而不是它包含的行或单元格。处理程序中的this
关键字指的是tbody元素，它没有最近的（“tr”）
（oops，正如@MaxVollmer在他的回答中解释的那样）（您需要将处理程序分配给td
元素，以便最近的
工作）。