Jquery UI 슬라이더를 사용하여 html 테이블 행/열을 강조 표시합니다.

Question

세 개의 슬라이더가있는 복잡한 html 테이블 div가 있습니다. 또한 jquery 스크립트와 CSS를 사용하여 셀 값에 따라 셀의 색을 변경합니다.

가로 슬라이더 (슬라이더 1)는 "Y"단면의 다른 html 표의 표시를 제어합니다.

긴 세로 슬라이더 (슬라이더 2)는 "X"단면의 다른 html 표의 표시를 제어합니다.

짧은 수직 슬라이더는 기본 HTML 테이블에 표시된 "z"레이어를 제어합니다. (이 슬라이더를 움직여 html 콘텐츠가 나타나게하십시오)

슬라이더 1과 2를 움직이면 메인 테이블에서 행과 열을 강조하고 싶습니다. 조건부 서식을 변경하지 않으려면 행/열의 테두리를 두껍게/다른 색으로 변경하는 것이 좋습니다.

는 여기에 내가, 다른 모든 잘 작동 원하는 것을보다 Fiddle

기타입니다. 여기에 내가 시도하고 작동하도록 넣어 무엇 (테스트를 위해 지금 내가 배경색을하려고 해요,하지만 난 결국 테두리 색상/스타일의 변화로 변경 것) : 지금은 많이 만들고 마우스 오른쪽

$('#tab').siblings().css('background-color', '#EAD575'); 
var ind = $('#tab').index(); 
$('#tab tbody td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575'); 

페이지 배경의 일부를 포함해서는 안되는 강조 표시된 항목

도움이 필요하십니까? 감사!

Answer 1

테이블 요소는 #tab 요소의 하위 요소이므로 .siblings()을 잘못 사용했습니다.

배경색 및/또는 테두리를 변경하기 위해 표 셀 (td)에 추가하는 "강조 표시된"CSS 클래스를 선언하는 것이 좋습니다.

적절한 셀을 강조 표시하는 다음과 같은 함수를 정의 할 수 있습니다. 이 기능은 슬라이더가 변경 될 때마다 호출하지만, 입력 값이 슬라이더의 값과 일치하도록 변경 한 후에 만 ​​할 것이다 :

function updateHighlightedCell() { 
    var iCol = parseInt($('#amount1').val(), 10) - 1, 
     iRow = parseInt($('#amount2').val(), 10) - 1, 
     $table = $tab.children(); 
    $table.find('td').removeClass('highlighted'); 
    $table.find('tr:eq(' + iRow + ')').find('td:eq(' + iCol + ')').addClass('highlighted'); 
} 

jsfiddle

참고 : 나는에 행과 열 수를 축소 깡깡이.

---

사용, 행과 열을 강조하려면 너무 효율성에 큰 향상의

$table.find('td').removeClass('highlighted'); 
$table.find('tr').find('td:eq(' + iCol + ')').addClass('highlighted'); 
$table.find('tr:eq(' + iRow + ')').find('td').addClass('highlighted'); 

jsfiddle