Prototype을 사용하여 테이블 행을 어떻게 강조표시할 수 있나요?

StackOverflow https://stackoverflow.com/questions/52238

  •  09-06-2019
  •  | 
  •  

문제

각 테이블 행 태그에 자바스크립트를 배치하는 대신 Prototype 라이브러리를 사용하고 onmouseover 및 onmouseout 이벤트를 각 행에 삽입하기 위해 눈에 띄지 않는 자바스크립트를 생성하려면 어떻게 해야 합니까?

mootools, jQuery 등 대신 Prototype 라이브러리를 활용하는 답변이 가장 도움이 될 것입니다.

도움이 되었습니까?

해결책 

<table id="mytable">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Bork</td><td>Bork</td></tr>

    </tbody>
</table>

<script type="text/javascript">

$$('#mytable tr').each(function(item) {
    item.observe('mouseover', function() {
        item.setStyle({ backgroundColor: '#ddd' });
    });
    item.observe('mouseout', function() {
        item.setStyle({backgroundColor: '#fff' });
    });
});
</script>

다른 팁

프로토타입을 사용할 수 있습니다. addClassName 그리고 removeClassName 행동 양식.

강조 표시된 항목에 적용할 CSS 클래스 "hilight"를 만듭니다. <tr>'에스.그런 다음 페이지 로드 시 다음 코드를 실행합니다.

var rows = $$('tbody tr');  
for (var i = 0; i < rows.length; i++) {  
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); }  
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); }  
}

약간 일반적인 솔루션:

마우스 포인터를 테이블 위에 놓으면 강조 표시되는 행이 포함된 테이블을 만드는 간단한 방법이 있다고 가정해 보겠습니다.이상적인 세계에서는 단 하나의 간단한 CSS 규칙만 있으면 매우 쉬울 것입니다.

tr:hover { background: red; }

불행하게도 이전 버전의 IE는 A 이외의 요소에서 :hover 선택기를 지원하지 않습니다.그래서 우리는 JavaScript를 사용해야 합니다.

이 경우에는 마우스오버 가능한 행이 있어야 하는 테이블을 표시하기 위해 "highlightable" 테이블 클래스를 정의하겠습니다.테이블 행에 "highlight" 클래스를 추가 및 제거하여 배경 전환을 만들어 보겠습니다.

CSS

table.highlightable tr.highlight { background: red; }

JavaScript(프로토타입 사용)

// when document loads
document.observe( 'dom:loaded', function() {
    // find all rows in highlightable table
    $$( 'table.highlightable tr' ).each( function( row ) {
        // add/remove class "highlight" when mouse enters/leaves
        row.observe( 'mouseover', function( evt ) { evt.element().addClassName( 'highlight' ) } );
        row.observe( 'mouseout', function( evt ) { evt.element().removeClassName( 'highlight' ) } );
    } );
} )

HTML

이제 해야 할 일은 원하는 테이블에 "highlightable" 클래스를 추가하는 것입니다.

<table class="highlightable">
    ...
</table>

나는 약간의 변화를 주었다. @swilliams 암호.

$$('#thetable tr:not(#headRow)').each(

이를 통해 다음과 같은 헤더 행이 있는 테이블을 만들 수 있습니다. 그렇지 않다 강조 표시됩니다.

<tr id="headRow">
    <th>Header 1</th>
</tr>

다음과 같이 각 행에 대해 작업을 수행할 수 있습니다.

$('tableId').getElementsBySelector('tr').each(function (row) {
  ...
});

따라서 해당 함수 본문에서 'row' 변수의 각 행에 한 번에 하나씩 액세스할 수 있습니다.그런 다음 Event.observe(row, ...)를 호출할 수 있습니다.

따라서 다음과 같이 작동할 수 있습니다.

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});

JS 없이 마우스를 놓으면 행이 강조 표시되는 행 배경에 대한 흥미로운 솔루션을 찾았습니다.여기는 링크

모든 브라우저에서 작동합니다.IE6/7/8의 경우...

tr{ position: relative; }
td{ background-image: none }

그리고 Safari의 경우 각 TD에 대해 음수 배경 위치를 사용합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top