Установить класс для следующего столбца, если предыдущий столбец имеет размер строки - PullRequest
Новая
       1

Установить класс для следующего столбца, если предыдущий столбец имеет размер строки

4 голосов
/ 23 января 2020

У меня есть HTML таблица как: 

$(document).ready(function() {
  var span = 1;
  var prevTD = "";
  var prevTDVal = "";
  $("#table tr td:first-child").each(function () {
    $("#table tr td:nth-child(1)").each(function () {
      if (span > 1) {
        $(this).addClass('color');
      }
    });
    var $this = $(this);
    var value = $this.text();
    if (value === prevTDVal) {
      span++;
      if (prevTD != "") {
        prevTD.attr("rowspan", span);
        $this.remove();
      }
    } else {
      prevTD = $this;
      prevTDVal = value;
      span = 1;
    }
  });
});
table {
  border-collapse: collapse;
}
table td {
  padding: 5px;
}
.color {
  background: royalblue;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <table border="1" id="table">
      <tr>
        <td></td>
        <td>aslkda</td>
        <td>asdasd</td>
        <td>asasd</td>
        <td>adfasdas</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>asfasdasd</td>
        <td>asfdasdas</td>
        <td>asfasdas</td>
        <td>asfasdasdf</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>ff</td>
        <td>asff</td>
        <td>asfsdfs</td>
        <td>sfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfs</td>
        <td>sdfsd</td>
        <td>sdfsdfsd</td>
        <td>sdfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfsdf</td>
        <td>sdfdfsd</td>
        <td>sfsdfsd</td>
        <td>fkfke</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdf</td>
        <td>asfsdf</td>
        <td>djjdod</td>
        <td>ikowefk</td>
      </tr>
      <tr>
        <td>kfjsdkvn</td>
        <td>,xsnv</td>
        <td>ksfhjsdf</td>
        <td>sdkvjsdkv</td>
        <td>sdkfhsdk</td>
      </tr>
    </table>
  </body>
</html>

Если 1-й столбец таблицы имеет такое же содержимое, тогда мне нужно назначить rowspan, который работает отлично, но мне нужно назначить класс следующему столбец, но только если rowspan > 1, я пытался, но он также назначает классы для 3-й строки. Я скопировал код rowspan из этой ссылки . Я тоже пытался остановить распространение, которое не помогло.

Есть предложения?

1 Ответ

0 голосов
/ 23 января 2020

Возможно, существует более эффективный рефакторинг вашей общей стратегии, но это устраняет проблему третьей колонки: 

$(document).ready(function() {
    let prevCell;
    let prevCellVal = '';
    let rowSpan = 1;

    $("#table tr").each(function() {
        let row = $(this);
        let firstCell = row.find('td:first-child');
        let firstCellVal = firstCell.text();

        if (firstCellVal === prevCellVal) {
            rowSpan++;

            if (prevCell) {
                prevCell.attr("rowspan", rowSpan);
                row.addClass('grouped');
                row.prev('tr:not(.grouped)')
                    .find('td:nth-child(2)')
                    .addClass('color');
                firstCell.remove();
            }
        } else {
            prevCell = firstCell;
            prevCellVal = firstCellVal;
            rowSpan = 1;
        }
    });
});
table {
  border-collapse: collapse;
}
table td {
  padding: 5px;
}
.grouped td:first-child, .color {
  background: royalblue;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <table border="1" id="table">
      <tr>
        <td></td>
        <td>aslkda</td>
        <td>asdasd</td>
        <td>asasd</td>
        <td>adfasdas</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>asfasdasd</td>
        <td>asfdasdas</td>
        <td>asfasdas</td>
        <td>asfasdasdf</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>ff</td>
        <td>asff</td>
        <td>asfsdfs</td>
        <td>sfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfs</td>
        <td>sdfsd</td>
        <td>sdfsdfsd</td>
        <td>sdfsdfsdf</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdfsdf</td>
        <td>sdfdfsd</td>
        <td>sfsdfsd</td>
        <td>fkfke</td>
      </tr>
      <tr>
        <td>content2</td>
        <td>sfsdf</td>
        <td>asfsdf</td>
        <td>djjdod</td>
        <td>ikowefk</td>
      </tr>
      <tr>
        <td>kfjsdkvn</td>
        <td>,xsnv</td>
        <td>ksfhjsdf</td>
        <td>sdkvjsdkv</td>
        <td>sdkfhsdk</td>
      </tr>
    </table>
  </body>
</html>

Скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...