리스트에서 input 을 하나 달았는데요 input 클릭시 해당 줄의 색이 바뀌었으면 합니다. 채택완료
초보자나요
9년 전
조회 2,493
그림으로하는게 설명이 더 빠를것 같아 그림첨부했어요.
위 그림처럼 리스트화면에 인풋을 넣었는데요 해당 인풋 클릭시 인풋이 있는 줄을 모두
색상변하게 하고 싶습니다.
hover 로 하면되는데 마우스가 해당 인풋을 벗어나면 색상이 다시 지워지더라구요..
한번이라도 input 클릭시 해당 줄의 배경색이 모두 노란색이되게 하려면 어떻게 해야할까요?
게시판은 그누5 기본 게시판 이구요 인풋은 wr_1 이고 아이디 및 클래스는 wr_1a 입니다.
테이블쪽 tr 아이디 및 클래스는 tr_bg 입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
9년 전
</p><p><script></p><p>$(function () {</p><p><span style="font-size: 11pt;"> $("input[name=wr_1]").on('click', function () {</span></p><p style="margin-left: 0px;"><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 11pt;">$(this).closest('tr').find('td').css({</span></p><p style="margin-left: 0px;"><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 11pt;">'background' : 'yellow'</span></p><p style="margin-left: 0px;"><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span>})</p><p style="margin-left: 0px;"><span style="font-size: 14.6667px;"> </span><span style="font-size: 14.6667px;"> </span>})
<span style="font-size: 11pt;">})</span> </p><p></script></p><p><span style="font-size: 14.6667px;">
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
초보자나요
9년 전
댓글을 작성하려면 로그인이 필요합니다.
9년 전
초보자나요님 // 클래스를 따로 만들어 놓으신다면
스크립트 + CSS 클래스로 처리 가능합니다
위의 소스 중 4~6 라인을 변경하시면 됩니다.
그리고 wr_?? 같은 name에 숫자만 변경이 된다면 하단과 같은 방식으로 변경하셔도 됩니다
</p><p style="line-height: 1;"><span style="font-size: 10pt;"><script></span></p><p style="line-height: 1;"><span style="font-size: 10pt;">$(function () {</span> </p><pre><p style="line-height: 1;"><span style="font-size: 10pt;"> $("input[name^=wr_]").on('click', function () {
$(this).closest('tr').find('td').addClass('bg-yellow');
})
})
</script></span></p><p style="line-height: 1;"><span style="font-size: 10pt;">
위와 같은 형식으로 변경하시면 td 안에 wr_로 시작하는 input text는 전체적으로 적용이 가능해집니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
혹시요.. 클래스로 할수 있는 법은 없을까요?
생각해보니 필드가 많아질것 같아서요^^