如何從多行表的隱藏 td 中獲取文本？

Question

我有一個多行表，例如

<table id="datable_1">
<tr>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td>
</tr>
<tr>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td>
</tr>
<tr>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td>
</tr>
<tr>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td>lorem ipsum</td>
   <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td>
</tr>
</table>

請注意：這是一個多行表，它會根據數據不斷增加其行。 我不在任何<tr>或<td>標記中使用 ID 或 CLASSES

請幫助我從每一行中獲取隱藏 td 的值。

這是我的起始代碼

let elems = $('#datable_1 tr');
$(elems).each(function(index) {
  if (index !== 0) {
    console.log(elem.eq(8).text());
  }
});

它不起作用。

Answer 1

您可以遍歷所有tr元素，然后從當前元素中找到特定的td元素。

$('#datable_1 tr').each(function(index) {
  console.log($(this).find('td:eq(8)').text());
});

 $('#datable_1 tr').each(function(index) { console.log($(this).find('td:eq(8)').text()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datable_1"> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> </table>

或：與nth-child ：

$('#datable_1 tr td:nth-child(9)').each(function(index) {
  console.log($(this).text());
});

 $('#datable_1 tr td:nth-child(9)').each(function(index) { console.log($(this).text()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datable_1"> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> </table>

如果目標元素始終是最后一個子元素，那么最好使用:last-child選擇器：

$('#datable_1 tr td:last-child').each(function(index) {
  console.log($(this).text());
});

 $('#datable_1 tr td:last-child').each(function(index) { console.log($(this).text()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datable_1"> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> <tr> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td>lorem ipsum</td> <td style="display:none;">I WANT TO GET THIS HIDDEN TEXT</td> </tr> </table>

Answer 2

如果你想得到任何隱藏的<td>文本，不僅僅是每個<tr>中的最后一個，你可以迭代每個<td>直接檢查它是否有display: none 。

let elems = $('#datable_1 td');
$(elems).each(function(index) {
  if ($(this).css('display') === "none") {
    console.log($(this).text())
  };
});

Answer 3

首先，您應該使用類。

.hidden {
    display: none;
}

<td class="hidden">I WANT TO GET THIS HIDDEN TEXT</td>

然后，在 jQuery 中，您可以遍歷$(".hidden")並使用$(this).text()獲取文本。

如果沒有，請執行以下操作：

let elems = $('#datable_1 td');

//iterating over all "tds"
$(elems).each(function() {
  if ($(this).css('display') == "none") {
          console.log($(this).text()));
      }
});