主页 / 问题 / 711195
Accepted
pridan
Asked:2020-08-27 22:34:56 +0000 UTC2020-08-27 22:34:56 +0000 UTC

将表格单元格的类复制到同一单元格但在上面一行

  • 772

请帮我解决这个问题。我有一张桌子。其中数据由后端动态加载。通过单击该行，下方会出现另一行，其中指示每个单元格的百分比变化。根据正面或负面动态，百分比颜色为绿色或红色。为此，添加了绿色或红色类。这就是它的本质和工作原理！

这是我需要做的。

在每个单元格::after 的帮助下，我添加了一个小圆圈，它应该是红色或绿色的，就像隐藏行中的数据一样。基本上，我需要以某种方式检查下一行中每个单元格中的类，并将类添加到上一行的单元格中。为此，我创建了类.green-circle和.red-circle. 为了清楚起见，我已将这些类添加到某些单元格中。并创建了一个例子。但我需要动态地做它，它对我不起作用。我也不想改变 HTML 结构，或者至少这样做。

$(document).on('click', 'th:first-child', function () {
  $(this).toggleClass('active');
  $(".hidden").toggleClass('visible');
});
* {
  box-sizing: border-box;
}

.container {
  width: 600px;
  margin: 0 auto;
}

table {
  width: 100%;
}

th, tr {
  padding: 10px 15px;
}

th {
  font-size: 15px;
  color: grey;
}

.hidden {
  opacity: 0;
}

th:first-child {
  padding: 10px 60px;
  position: relative;
  cursor: pointer;
}

tr:first-child th:first-child::after {
  display: none;
}

.green {
  color: green;
}

.red {
  color: red;
}

.visible {
  opacity: 1;
  transition: .3s;
}

.visible th::after {
  display: none;
}

.title th {
  position: relative;
}

.title th::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 5px;
  background: grey;
  border-radius: 50%;

}

.title .green-circle::after {
  background: green;
}

.title .red-circle::after {
  background: red;
}

th:last-child::after {
  display: none;
}

.title-line:first-child::after {
  content: '';
  position: absolute;
  right: 42px;
  top: 13px;
  background: transparent;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #2b435c;
}

.title-line:first-child.active {
  color: #007bff;
}

.title-line:first-child.active::after {
  top: 17px;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #007bff transparent transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table>
    <tbody >
      <tr>
        <th></th>
        <th>feb</th>
        <th>mar</th>
        <th>apr</th>
        <th>may</th>
        <th>jun</th>
        <th>jul</th>
        <th></th>
        <th>growmn rate</th>
      </tr>
      <tr class="title">
        <th class="title-line">
            Active
        </th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>18%</th>
      </tr>
      <tr class="hidden">
        <th></th>
        <td class="green">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="green"></td>
      </tr>
      <tr class="title">
        <th class="title-line">
            Active2
        </th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th class="green-circle">6%</th>
        <th >90%</th>
      </tr>
      <tr class="hidden">
        <th></th>
        <td class="green">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="green"></td>
      </tr>
      <tr class="title">
        <th class="title-line">
            Active3
        </th>
        <th>6%</th>
        <th>6%</th>
        <th class="red-circle">6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>1%</th>
      </tr>
      <tr class="hidden">
        <th></th>
        <td class="green">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="green"></td>
      </tr>
    </tbody>
  </table>
</div>

javascript

1 个回答

  1. Best Answer

    const $container = $('.container'),
  $rowTitle = $container.find('tr.title');
  
$rowTitle.each(function() {
  const $row = $(this),
    $rowChildren = $row.children(),
    $nextRow = $row.next(),
    $nextRowChildren = $nextRow.children();
    
  $nextRowChildren.each(function(i) {
    const $cell = $(this);

    $rowChildren.eq(i)
      .toggleClass('green-circle', $cell.hasClass('green'))
      .toggleClass('red-circle', $cell.hasClass('red'));
  });

  $rowChildren.first().on('click', function () {
    $(this).toggleClass('active');
    $nextRow.toggleClass('visible');
  });
});
    * {
  box-sizing: border-box;
}

.container {
  width: 600px;
  margin: 0 auto;
}

table {
  width: 100%;
}

th, tr {
  padding: 10px 15px;
}

th {
  font-size: 15px;
  color: grey;
}

.hidden {
  opacity: 0;
}

th:first-child {
  padding: 10px 60px;
  position: relative;
  cursor: pointer;
}

tr:first-child th:first-child::after {
  display: none;
}

.green {
  color: green;
}

.red {
  color: red;
}

.visible {
  opacity: 1;
  transition: .3s;
}

.visible th::after {
  display: none;
}

.title th {
  position: relative;
}

.title th::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 5px;
  background: grey;
  border-radius: 50%;

}

.title .green-circle::after {
  background: green;
}

.title .red-circle::after {
  background: red;
}

th:last-child::after {
  display: none;
}

.title-line:first-child::after {
  content: '';
  position: absolute;
  right: 42px;
  top: 13px;
  background: transparent;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #2b435c;
}

.title-line:first-child.active {
  color: #007bff;
}

.title-line:first-child.active::after {
  top: 17px;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #007bff transparent transparent transparent;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table>
    <tbody >
      <tr>
        <th></th>
        <th>feb</th>
        <th>mar</th>
        <th>apr</th>
        <th>may</th>
        <th>jun</th>
        <th>jul</th>
        <th></th>
        <th>growmn rate</th>
      </tr>
      <tr class="title">
        <th class="title-line">
            Active
        </th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>18%</th>
      </tr>
      <tr class="hidden">
        <th></th>
        <td class="green">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="green"></td>
      </tr>
      <tr class="title">
        <th class="title-line">
            Active2
        </th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th >90%</th>
      </tr>
      <tr class="hidden">
        <th></th>
        <td class="green">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="green"></td>
      </tr>
      <tr class="title">
        <th class="title-line">
            Active3
        </th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>6%</th>
        <th>1%</th>
      </tr>
      <tr class="hidden">
        <th></th>
        <td class="green">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="red">50%</td>
        <td class="green">50%</td>
        <td class="green"></td>
      </tr>
    </tbody>
  </table>
</div>

    • 2

相关问题