컬러 행을 번갈아 가며 테이블. 속성이있는 테이블 행에 스타일을 유지하고 다른 tr은 건너 뜁니다. 가급적 CSS로 수행

debugcn 에 게시 Dev

ALLIGAT0R_BL00D

클릭 가능한 행이있는 테이블에서 작업 중입니다. 행을 클릭하면 클릭 한 행 바로 뒤에 새 행이 추가됩니다.

// before click
<tr role=row>...</tr>
<tr role=row>...</tr>

//after clicking the 1st tr
<tr role=row>...</tr>
<tr>...</tr>
<tr role=row>...</tr>

내가 필요한 것은 role="row"번갈아 가며 색상이 번갈아 가며 tr역할이없는 행 이 무시 된다는 것 입니다.

이것이 내가 지금까지 가지고있는 것입니다.

$('tr[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<tr colspan="4"><td>-</td></tr>')
    .attr('data-toggle', 0);
  }
});

.myclass > tbody > tr[role=row]:nth-child(odd) td {
    background-color: #fad;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myclass">
  <thead>
    <tr role="row">
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

문제는 새 행을 추가 할 때마다 (없이 role) 여전히 CSS 선택자에 대해 계산되고 행 role="row"이 잘못 변경 된다는 것 입니다.

간단히 말해서 , 행이 삽입 되어도 색상이 유지 되는 trs 에만 적용되는 zebra 스타일을 원합니다.role="row"

CSS에서 할 수 없다면 jquery도 괜찮습니다.

모든 도움과 피드백을 주시면 감사하겠습니다!

편집하다:

Temani Afif의 대답은 좋지만이 테이블을 그대로 유지해야합니다.
Temani Afif의 세 번째 솔루션은 저에게 가장 적합합니다.

Afif 동반

자신의 요소를 사용하여 테이블 논리를 다시 실행하면 nth-of-type다른 유형의 요소를 삽입하면 쉽게이 작업을 수행 할 수 있습니다 .

$('[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<section><span >-</span></section>')
    .attr('data-toggle', 0);
  }
});

.myclass [role=row]:nth-of-type(odd) * {
    background-color: #fad;
}
.myclass {
  display:table;
  border-spacing:2px;
}
.myclass > * {
  display:table-row;
}
.myclass > * > * {
  display:table-cell;
}
header {
  font-weight:bold;
}

tbody > div {
  display:table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myclass">
    <header>
      <span>head 1</span>
      <span>head 2</span>
      <span>head 3</span>
      <span>head 4</span>
    </header>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
    <div role="row">
      <span>should</span>
      <span>be</span>
      <span>colored</span>
      <span>!</span>
    </div>
    <div role="row">
      <span>no</span>
      <span>color</span>
      <span>-</span>
      <span>-</span>
    </div>
</div>

또는 해키 아이디어 (나는 해키를 주장)는 테이블을 유지하면서 다른 요소를 도입하는 것입니다.

$('tr[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<div><td>-</td></div>')
    .attr('data-toggle', 0);
  }
});

.myclass > tbody > tr[role=row]:nth-of-type(odd) td {
    background-color: #fad;
}

.myclass > tbody > div {
  display:table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myclass">
  <thead>
    <tr role="row">
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

또는 단순히 jQuery를 사용하여 채색을 초기화합니다.

$('.myclass > tbody > tr[role=row]:nth-of-type(odd) td').css('background-color','#fad')

$('tr[role=row]').click(function () {
  if ($(this).attr('data-toggle') != 0) {
  $(this).after('<tr><td>-</td></tr>')
    .attr('data-toggle', 0);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myclass">
  <thead>
    <tr role="row">
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
    <tr role="row">
      <td>should</td>
      <td>be</td>
      <td>colored</td>
      <td>!</td>
    </tr>
    <tr role="row">
      <td>no</td>
      <td>color</td>
      <td>-</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사