테이블에 대한 tr 및 td 요소를 동적으로 생성하는 PHP 스크립트를 만들고 있습니다. 사용자가 첫 번째 열의 특정 셀을 클릭하면 AJAX 함수가 실행되어 추가 콘텐츠를 표시합니다. 이것은 정상적으로 작동하지만 간단한 스타일링에 문제가 있습니다. 사용자가 주어진 셀을 클릭하면 다른 셀을 클릭 할 때까지 (작동하지 않음) 해당 행의 색상을 변경 (작동)하고 싶습니다.
내 PHP 파일이 다소 크기 때문에 관련 부분 만 게시하고 있습니다.
<?php
$myFiles = showMyAttrs();
foreach($myFiles as $myFile) {
echo("<tr class = 'gradeC' onClick = 'changeColour(this)' onchange = 'restoreColour(this)' >");
echo("<td onClick = 'sendCell(this)' ><img src = $msEx /></td>");
echo("<td>$myFile</td>");
echo("</tr>");
}
나는 또한 onchange 대신 onblur를 사용해 보았지만 동일한 결과를 얻었습니다.
자바 스크립트 기능 :
function changeColour(z) {
z.style.backgroundColor = "#FFFFFF";
}
function restoreColour(y) {
y.style.backgroundColor = "#00FF00";
}
시도하기 전에 :
function changeColour(z) {
document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
z.style.backgroundColor = "#FFFFFF";
<!-- document.getElementsByTagName("td").style.backgroundColor = "#00FF00"; -->
}
function changeColour(z) {
z.style.backgroundColor = "#FFFFFF";
document.getElementsByTagName("tr").style.backgroundColor = "#00FF00";
}
$('tr').click(function() {
$('tr').css('backgroundColor', '#0F0');
$(this).css('backgroundColor', '#FFF');
});
각각의 경우 (마지막 제외) 색상은 흰색으로 변경되지만 사용자가 다른 행을 클릭하면 이전 행이 녹색으로 돌아 가지 않습니다. 브라우저에서 호환되는 한 이것이 Javascript 또는 JQuery에서 작동하는지 상관하지 않습니다. 멋진 CSS 트릭도 사용해도 괜찮습니다.
당신은 올바른 길을 가고 있습니다. 수업을 추가 / 삭제하는 것이 좋은 방법이라고 생각합니다. 이것을 시도해 볼 수 있습니다.
jQuery
$('tr').on('click', function() {
$('tr').children('td').removeClass('active');
$(this).children('td').addClass('active');
});
CSS
.active { background-color: yellow; }
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다