td 스타일의 잘못된 jquery mousedown 수정 문제에 대한 해결 방법
//样式 <style type="text/css"> #right td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; font-size: 11px; padding: 6px 6px 6px 12px; color: #4f6b72; font-size: 15px; } td.alt { background: #F5FAFA; color: #797268; } img { max-width: 100px; max-height: 100px; } th { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; font-weight: bold; background: #4a98af; } tr.over td { background: #ecfbd4; /*这个将是鼠标高亮行的背景色*/ } td.selected, tr.even td.selected, tr.odd td.selected { background: #bce774; color: #555; } tr.click td, td.down { background: #bce774; color: #fff; } #right a { text-decoration: none; color: #057fac; } #right a:hover { text-decoration: none; color: #999; } </style> //脚本 <script type="text/javascript"> $(document).ready(function(){ $("#Clothes tr td").mousedown(function(){//鼠标按住时remove mouseenter时 td的样式。 $(this).removeClass("over");$(this).addClass("click");}) $("#Clothes tr td").mouseup(function(){//鼠标弹起时,清除td的样式 $(this).removeClass("click");}) $("#Clothes tr").mouseenter(function(){//鼠标进入tr添加样式.over $(this).addClass("over");}) $("#Clothes tr").mouseout(function(){ //鼠标离开tr,清除样式.over $(this).removeClass("over");}) $("#Clothes tr").click(function(){ //click tr时,添加样式.click $(this).addClass("click");$(this).siblings().removeClass("click");}) }); </script> <table id="Clothes"> <tr> <td style="width: 10%"> <td style="width: 20%"> <td style="width: 10%"> </tr> </table>
최상의 답변:
<style type="text/css"> #right td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; font-size: 11px; padding: 6px 6px 6px 12px; color: #4f6b72; font-size: 15px; } td.alt { background: #F5FAFA; color: #797268; } img { max-width: 100px; max-height: 100px; } th { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; font-weight: bold; background: #4a98af; } tr.over td { background: #ecfbd4; /*这个将是鼠标高亮行的背景色*/ } td.selected, tr.even td.selected, tr.odd td.selected { background: #bce774; color: #555; } tr.click td, td.down { background: #bce774; color: #fff; } #right a { text-decoration: none; color: #057fac; } #right a:hover { text-decoration: none; color: #999; } </style> <script type="text/javascript"> $(document).ready(function () { $("#right tr td").mousedown(function () {//鼠标按住时remove mouseenter时 td的样式。 $(this).removeClass("over"); $(this).addClass("click"); }) $("#right tr td").mouseup(function () {//鼠标弹起时,清除td的样式 $(this).removeClass("click"); }) $("#right tr").mouseenter(function () {//鼠标进入tr添加样式.over $(this).addClass("over"); }) $("#right tr").mouseout(function () { //鼠标离开tr,清除样式.over $(this).removeClass("over"); }) $("#right tr").click(function () { //click tr时,添加样式.click $(this).addClass("click"); $(this).siblings().removeClass("click"); }) }); </script> <body> <table id="right"> <tr> <td style="width: 10%">哈哈 </td> <td style="width: 20%">嘿嘿 </td> <td style="width: 10%">呵呵 </td> </tr> </table> </body>
원래 작성하신 내용은 정확하지만 테이블에 데이터가 없으므로 페이지가 로드될 때 아무것도 표시되지 않습니다. 당신은 그것에 데이터를 써야합니다. 그리고 전체 스타일은 오른쪽을 기반으로 하지만 테이블에는 옷을 잘 보고 변경하세요
위 내용은 td 스타일의 잘못된 jquery mousedown 수정 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!