jQuery 하이라이트 테이블 행
마우스 위에 테이블 행을 강조 표시해야 합니다.쉽게 할 수 있는 일인 것 같네요, 그렇죠?특히 jQuery를 사용합니다.하지만 안타깝게도 전 그렇게 운이 좋지 않아요.
테이블 행을 강조 표시하기 위해 여러 솔루션을 테스트했지만 아무 것도 작동하지 않는 것 같습니다 :-(
다음 스크립트를 테스트했습니다.
// TEST one
jQuery(document).ready(function() {
jQuery("#storeListTable tr").mouseover(function () {
$(this).parents('#storeListTable tr').toggleClass("highlight");
alert('test'); // Just to test the mouseover event works
});
});
//TEST 2
jQuery(document).ready(function() {
$("#storeListTable tbody tr").hover(
function() { // mouseover
$(this).addClass('highlight');
},
function() { // mouseout
$(this).removeClass('highlight');
}
);
});
이것은 나의 HTML 코드입니다.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/storeLocator.css" type="text/css"
media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></
script>
</head>
<body>
<table id="storeListTable">
<thead>
<tr class="even">
<th>ID</th>
<th>Navn</th>
<th>E-post</th>
<th>Nettside</th>
</tr>
</thead>
<tbody>
<tr class="" id="store1">
<td>10</td>
<td>Boss Store Oslo</td>
<td> <a href="mailto:">E-post</a></td>
<td> <a href="#">www</a></td>
</tr>
<tr class="" id="store3">
<td>8</td>
<td>Brandstad Oslo City</td>
<td> <a href="mailto:a@brandstad.no">E-post</a></td>
<td> <a href="#">www</a></td>
</tr>
<tr class="even" id="store4">
<td>7</td>
<td>Fashion Partner AS</td>
<td> <a href="mailto:b@fashionpartners.com">E-post</a></td>
<td> <a href="#">www</a></td>
</tr>
<tr class="" id="store5">
<td>1</td>
<td>Follestad</td>
<td> <a href="mailto:c@online.no">E-post</a></td>
<td> <a href="#">www</a></td>
</tr>
<tr class="even" id="store6">
<td>2</td>
<td>Follestad</td>
<td> <a href="mailto:d@follestad.com">E-post</a></td>
<td> <a href="#">www</a></td>
</tr>
</tbody>
</table>
</body>
</html>
그럼.. 누가 올바른 방향으로 밀어줄 수 있나요?
갱신하다
저는 더 이상 테이블 행을 강조하기 위해 jQuery를 사용하는 것이 아니라 CSS를 사용합니다.
이는 목록 요소에 대한 것이지만 테이블 행에도 적용될 것으로 생각됩니다.
li:n번째 자식(홀수) {배경-색: #f3f3f3; }
IE6 지원이 필요 없는 경우 몇 가지 간단한 CSS로 강조 표시를 할 수 있습니다.
#table tr:hover {
background-color: #ff8080;
}
이 플러그인 http://p.sohei.org/jquery-plugins/columnhover/ 을 사용해 보십시오.
사용법은 이렇습니다.
<script type="text/javascript">
$(document).ready(function()
{
$('#storeListTable').columnHover({ hoverClass:'highlight'});
});
</script>
몸조심하세요.
테스트할 때 경고 메시지가 실제로 뜨나요?
만약 그렇다면, 문제가 당신의 CSS에 있을 수 있습니다.Tr 태그에 적용되는 대부분의 스타일은 효과가 없다는 것을 깨닫기까지 오랜 시간이 걸렸습니다.그래서 일반적으로 행에 있는 각 td에 스타일을 적용해야 합니다.
.highlight td {highlighted appearance}
보다는
.highlight {highlighted appearance}
+1은 rhy입니다.배경 규칙 사용하기.highlight td당신의 'TEST 2'를 잘 작동시켰습니다.
'TEST 1'은 불필요하기 때문에 그렇지 않습니다.parents()불러.
한 번은 이 솔루션이 완벽하게 작동한다는 것을 발견했습니다. 추가만 하면 됩니다.아쉽게도 저는 저자를 모릅니다 :(
<script type="text/javascript">
$("#table_id").not(':first').hover(
function () {
$(this).css("background","red");
},
function () {
$(this).css("background","");
}
);
</script>
마우스를 맴돌 때 테이블의 행을 강조 표시하는 방법 이 항목을 살펴보십시오.
물론 간단한 CSS를 가진 줄리안의 솔루션이 선호됩니다.자바스크립트로 동적으로 하려면 이렇게 하면 됩니다.
$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');});
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');});
행당 div가 더 많은 경우 각 행 클래스="행"을 지정하고 의 두 번째 인수로 'div.row'를 지정하여 강조 표시할 div를 지정할 수 있습니다.
언급URL : https://stackoverflow.com/questions/759475/jquery-highlight-table-row
'programing' 카테고리의 다른 글
| Angular 6에서 암호 유효성 확인 (0) | 2023.10.02 |
|---|---|
| 한 열의 값이 서로 다른 가장 최근의 레코드 3개를 선택합니다. (0) | 2023.10.02 |
| 스프링 보안에서 CSS 또는 JS 리소스를 로드할 수 없음 (0) | 2023.10.02 |
| 부트스트랩 3.0 팝오버 및 툴팁 (0) | 2023.10.02 |
| .NET에서 개체를 UTF-8 XML로 직렬화 (0) | 2023.10.02 |