Скрыть <td>содержимое, когда то же самое, что и <tr>выше - PullRequest
Новая
       20

Скрыть <td>содержимое, когда то же самое, что и <tr>выше

1 голос
/ 18 апреля 2019

Учитывая простую таблицу, подобную этой:

Я хочу скрыть текст, когда он совпадает с текстом в строке выше.

Я пробовал это ... но яя действительно новичок в JQuery.

$(document).ready(function() {
  let previous = "*";
  $('.nodup').each(function(i, obj) {
    if (obj.html() == previous) {
      $(obj).hide();
    } else {
      previous = obj.html(); // "reset" the previous value?
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="nodup">one</td> show this td
    <td>5</td>
    <td>7</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="nodup">one</td> hide this td
    <td>6</td>
    <td>9</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="nodup">one
      <td> hide this td
        <td>3</td>
        <td>8</td>
        <td>3</td>
  </tr>
  <tr>
    <td class="nodup">two</td> show this td
    <td>7</td>
    <td>3</td>
    <td>1</td>
  </tr>
</table>

Так это будет выглядеть в конце концов ... 

one    5    7    3
       6    9    1
       3    8    3
two    7    3    1

и т. Д.

1 Ответ

2 голосов
/ 18 апреля 2019

Один из вариантов - циклически проходить элементы $(".nodup") с использованием filter. Если текст совпадает с переменной temp (значит, с предыдущей), верните true. Присвойте новое значение для temp и в противном случае верните false.

Установите html в пустую строку и не удаляйте ее. 

var temp = null;
$(".nodup").filter(function(i, o) {
  var text = $(this).text().trim();
  if (text === temp) return true;

  temp = text;
  return false;
}).html("");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="nodup">one</td>
    <td>5</td>
    <td>7</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="nodup">one</td>
    <td>6</td>
    <td>9</td>
    <td>1</td>
  </tr>
  <tr>
    <td class="nodup">one</td>
    <td>3</td>
    <td>8</td>
    <td>3</td>
  </tr>
  <tr>
    <td class="nodup">two</td>
    <td>7</td>
    <td>3</td>
    <td>1</td>
  </tr>
</table>
...