как получить текст из скрытой таблицы многострочных таблиц? - PullRequest
Новая
       0

как получить текст из скрытой таблицы многострочных таблиц?

0 голосов
/ 11 апреля 2020

У меня есть многострочная таблица, например, 

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

Обратите внимание: это многорядная таблица, которая продолжает увеличивать свою строку на основе данных. Я НЕ ИСПОЛЬЗУЮ ID или КЛАССЫ ни в одном из тегов <tr> или <td>

Пожалуйста, помогите мне получить значение скрытого тд из каждой строки.

вот мой начальный код 

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

Не работает.

Ответы [ 3 ]

3 голосов
/ 11 апреля 2020

Прежде всего, вы должны использовать классы. 

.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()));
      }
});
1 голос
/ 11 апреля 2020

Вы можете l oop через все элементы tr , а затем найти указанный элемент c 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>
0 голосов
/ 11 апреля 2020

Если вы хотите получить любой скрытый <td> текст, а не только последний в каждом <tr>, вы можете выполнить итерацию каждого <td>, непосредственно проверяя, имеет ли он display: none. 

let elems = $('#datable_1 td');
$(elems).each(function(index) {
  if ($(this).css('display') === "none") {
    console.log($(this).text())
  };
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...