使用jQuery返回隐藏值

时间：2018-09-10 10:39:44

标签： javascript jquery html

在实际示例中，它的主体中还有更多行具有实际值（它会根据搜索添加来自API的结果）。

我想单击一行，并希望以console.log开头返回该行中的轨道ID的值。它隐藏在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()，则返回'undefined'。

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

5 个答案:

答案 0 :(得分：1)

  

我想单击一行，并希望返回该行中的曲目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>

答案 1 :(得分：1)

来自有关.closest()的jQuery文档：

  

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

因此，您实际上从未在表内获得tr元素，因为您实际上是在告诉它寻找表的父级tr，显然这是不存在的。

答案 2 :(得分：0)

你想要这个吗？

$("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>

答案 3 :(得分：0)

尝试一下 

$(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>

答案 4 :(得分：0)

您可以在点击表行上按这样的类名查找

<!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>
相关问题
最新问题