검색
검색

jQuery Sibling을 사용하여 HTML 테이블에서 최상위 <th> 찾기

debugcn 에 게시 Dev
5
Brandon

숨겨진 열이 많은 HTML 테이블이 있습니다. 열은 3 개의 집합으로 생각할 수 있습니다. 처음 두 개는 숨겨지고 세 번째는 볼 수 있습니다. 3 번째에 마우스를 올리면 3 개 세트의 처음 2 개도 볼 수있게됩니다. <th>마우스 오버가 발생하는 열에서 상위 2 개를 선택하는 방법을 알아 내려고합니다. 그래서 jQuery를 사용하여 html을 변경하여 colspan='3'둘 다 에 추가 <th>하여 "세트"의 3 개 열 모두에 걸쳐 있습니다.

예 : 첫 번째 노란색 열의 일부 위에 마우스를 놓으면 해당 열 이전에 숨겨 졌던 2 개의 열이 이제 표시됩니다. "1000017"및 "Potato Chips"는 열 범위를 3으로 변경하여 열을 다시 올바르게 덮을 수 있도록 선택해야합니다. 내 현재 코드가 제대로 작동하지 않고 대신 전체 "항목 이름"행을 선택합니다.

내 질문은 : <th>전체 행 대신 적절한 것을 선택하도록 this.siblings jQuery 행을 어떻게 수정할 수 있습니까 ?

아래 스 니펫을 참조하십시오.

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function(){
    $('td',this).slice(sel-3,sel-1).toggleClass('hidetd');
    $(this).siblings().first().toggleClass('light');
  })
})
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}

.hidetd {
    display:none;  
}

.light {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>100017</th>
    <th>100018</th>
    <th>100019</th>
    <th>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th><u>Potato chips</u>
    </th>
    <th><u>butterfingers</u>
    </th>
    <th><u>Flat Pretzels</u>
    </th>
    <th><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

다음은 숨겨진 열이없고 모든 제목이 올바른 열을 포함하는 경우의 모든 모습입니다.

.yellowbr {
  background-color: yellow;
}

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
       
}
<table>
  <tr>
    <th>Item #</th>
    <th colspan="3">100017</th>
    <th colspan="3">100018</th>
    <th colspan="3">100019</th>
    <th colspan="3">100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th colspan="3"><u>Potato chips</u></th>
    <th colspan="3"><u>butterfingers</u></th>
    <th colspan="3"><u>Flat Pretzels</u></th>
    <th colspan="3"><u>Milk Chocolate</u></th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

리 네크

이것이 당신이 찾고있는 것입니까?

$('.yellowbr').hover(function() {
  var sel = $(this).index();
  $('tr').each(function() {
    $('th', this).slice(sel / 3, sel / 3 + 1).attr('colspan', 3);
    $('th', this).filter(function(i) {
      return i !== sel / 3;
    }).attr('colspan', 1);

    var cellsToHightlight = $('td', this).slice(sel - 3, sel - 1);
    for (var i = 0; i < cellsToHightlight.length; i += 1) {
      var cell = $(cellsToHightlight[i]);
      if (cell.hasClass('hidetd')) {
        cell.removeClass('hidetd');
      }
    }

    $('td', this).filter(function(i, el) {
      return (i < sel - 3 || i > sel - 1) && (i + 1) % 3 !== 0;
    }).addClass('hidetd');

    $(this).siblings().first().toggleClass('light');
  });
});
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
.yellowbr {
  background-color: yellow;
}
.hidetd {
  display: none;
}
.light {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>100017</th>
    <th>100018</th>
    <th>100019</th>
    <th>100020</th>
  </tr>
  <tr>
    <th>Component</th>
    <th><u>Potato chips</u>
    </th>
    <th><u>butterfingers</u>
    </th>
    <th><u>Flat Pretzels</u>
    </th>
    <th><u>Milk Chocolate</u>
    </th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
    <td class='hidetd'>0</td>
    <td class='hidetd'>0</td>
    <td class='yellowbr'>0</td>
  </tr>
</table>

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

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

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Html 테이블에서 jquery를 사용하여 값 바꾸기

분류에서Dev

JQuery Find 메서드를 사용하여 HTML 테이블에서 확인란 찾기

분류에서Dev

SUM (하위 테이블의 값)을 사용하여 상위 테이블에서 값 빼기

분류에서Dev

jquery를 사용하여 테이블의 특정 색상을 기반으로 텍스트 찾기

분류에서Dev

이 HTML 테이블의 보이는 행에서만 값을 검색하기 위해 jquery를 사용하는 방법은 무엇입니까?

분류에서Dev

html / jquery를 사용하여 HTML 테이블에서 두 개의 겹치는 색상에 다른 색상을 할당하는 방법은 무엇입니까?

분류에서Dev

테이블을 래핑하는 최상의 jQuery 접근 방식 찾기

분류에서Dev

jQuery 객체 최상위에서 찾기

분류에서Dev

계산할 더 많은 시간을 입력하기 위해 JQuery에서 다른 HTML 테이블 생성

분류에서Dev

.NET을 사용하여 Excel (xls / xlsx)에서 HTML 테이블 만들기

분류에서Dev

SAS에서 하위 요약 행을 사용하여 테이블 만들기

분류에서Dev

Ajax를 사용하여 부분보기에서 상위 테이블을 업데이트하는 방법

분류에서Dev

jQuery를 사용하여 팝업 모달에서 행별로 HTML 테이블에 값을 삽입하는 방법

분류에서Dev

jQuery를 사용하여 HTML 테이블에서 동적으로 생성 된 행의 텍스트 상자 값을 채우는 방법

분류에서Dev

여러 테이블에 대한 HTML 텍스트 필드에서 여러 사용자 입력을 검색하기위한 쿼리

분류에서Dev

항목 이름을 사용하여 가장 낮은 값을 찾고 jquery를 사용하여 html 테이블에서 낮은 값 배경색을 변경하십시오.

분류에서Dev

JQUERY, PHP 및 AJAX를 사용하여 HTML 테이블 채우기

분류에서Dev

jQuery 및 JavaScript를 사용하여 HTML 테이블에 행과 셀 만들기

분류에서Dev

Chrome에서 최소 및 최대 값을 사용하여 "입력 범위"에 하한 / 상한 채우기 적용

분류에서Dev

jQuery를 사용하여 HTML 테이블의 항목을 반복

분류에서Dev

jquery를 사용하여 html 테이블을 통해 루프

분류에서Dev

일치 기능을 사용하여 테이블에서 텍스트 찾기

분류에서Dev

R에서 하이퍼 링크를 사용하여 HTML 테이블을 데이터 프레임으로 읽기

분류에서Dev

jquery를 사용하여 html 테이블에서 행을 삭제할 수 없습니다.

분류에서Dev

r을 사용하여 데이터 프레임에서 상위 값 찾기

분류에서Dev

mysql을 사용하여 테이블에서 중복 데이터 찾기

분류에서Dev

jquery에서 열을 사용하여 테이블 순서 설정

분류에서Dev

JQuery를 사용하여 테이블에서 확인란을 찾는 방법은 무엇입니까?

분류에서Dev

Perl을 사용하여 HTML에서 파비콘 찾기

Related 관련 기사

  1. 1

    Html 테이블에서 jquery를 사용하여 값 바꾸기

  2. 2

    JQuery Find 메서드를 사용하여 HTML 테이블에서 확인란 찾기

  3. 3

    SUM (하위 테이블의 값)을 사용하여 상위 테이블에서 값 빼기

  4. 4

    jquery를 사용하여 테이블의 특정 색상을 기반으로 텍스트 찾기

  5. 5

    이 HTML 테이블의 보이는 행에서만 값을 검색하기 위해 jquery를 사용하는 방법은 무엇입니까?

  6. 6

    html / jquery를 사용하여 HTML 테이블에서 두 개의 겹치는 색상에 다른 색상을 할당하는 방법은 무엇입니까?

  7. 7

    테이블을 래핑하는 최상의 jQuery 접근 방식 찾기

  8. 8

    jQuery 객체 최상위에서 찾기

  9. 9

    계산할 더 많은 시간을 입력하기 위해 JQuery에서 다른 HTML 테이블 생성

  10. 10

    .NET을 사용하여 Excel (xls / xlsx)에서 HTML 테이블 만들기

  11. 11

    SAS에서 하위 요약 행을 사용하여 테이블 만들기

  12. 12

    Ajax를 사용하여 부분보기에서 상위 테이블을 업데이트하는 방법

  13. 13

    jQuery를 사용하여 팝업 모달에서 행별로 HTML 테이블에 값을 삽입하는 방법

  14. 14

    jQuery를 사용하여 HTML 테이블에서 동적으로 생성 된 행의 텍스트 상자 값을 채우는 방법

  15. 15

    여러 테이블에 대한 HTML 텍스트 필드에서 여러 사용자 입력을 검색하기위한 쿼리

  16. 16

    항목 이름을 사용하여 가장 낮은 값을 찾고 jquery를 사용하여 html 테이블에서 낮은 값 배경색을 변경하십시오.

  17. 17

    JQUERY, PHP 및 AJAX를 사용하여 HTML 테이블 채우기

  18. 18

    jQuery 및 JavaScript를 사용하여 HTML 테이블에 행과 셀 만들기

  19. 19

    Chrome에서 최소 및 최대 값을 사용하여 "입력 범위"에 하한 / 상한 채우기 적용

  20. 20

    jQuery를 사용하여 HTML 테이블의 항목을 반복

  21. 21

    jquery를 사용하여 html 테이블을 통해 루프

  22. 22

    일치 기능을 사용하여 테이블에서 텍스트 찾기

  23. 23

    R에서 하이퍼 링크를 사용하여 HTML 테이블을 데이터 프레임으로 읽기

  24. 24

    jquery를 사용하여 html 테이블에서 행을 삭제할 수 없습니다.

  25. 25

    r을 사용하여 데이터 프레임에서 상위 값 찾기

  26. 26

    mysql을 사용하여 테이블에서 중복 데이터 찾기

  27. 27

    jquery에서 열을 사용하여 테이블 순서 설정

  28. 28

    JQuery를 사용하여 테이블에서 확인란을 찾는 방법은 무엇입니까?

  29. 29

    Perl을 사용하여 HTML에서 파비콘 찾기

뜨겁다태그

보관