이전 블로그 게시물은 체크박스에 대한 내용이었는데, 이번에는 라디오 버튼에 대한 내용입니다. 쿼리할 때 선택한 레코드의 행이 강조 표시되면 해당 행의 단일 버튼도 표시됩니다. 선택 버튼도 선택되어 사용자 경험이 향상됩니다. 오늘날의 시대는 사용자 경험의 시대입니다.
효과는 다음과 같습니다.
CSS 파일은 다음과 같습니다.
.selected{
background:#FF6500;
color:#fff
}:
js 파일의 코드는 아래와 같이 더욱 간단해집니다.
/**
* 라디오 버튼이 포함된 테이블의 배경색 설정
*/
$(document).ready(function()
{
/**
* 표를 클릭하면 배경색이 변경됩니다.
*/
$("#tablight tr :gt(0)").click (function() //
{
$(this).addClass("selected").siblings().removeClass("selected").end() 가져오기. find(" :radio").attr("checked",true);
});
})
코드를 적용하려면 다음을 수행해야 합니다. 테이블에 id 속성을 추가합니다. 속성 값은 "tablight"입니다. 이 작업이 완료되면 사용할 때 이 두 파일을 참조하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
