jQuery样式和颜色

问题描述 投票：0回答：1

如何使用Jquery为元素创建样式？我们必须做一张桌子，给单元格某些背景色。我想知道是否可以使用addClass（）方法。我必须给单元格样式而不使用css。不能通过使用CSS来赋予表格样式的单元格。这将在2天内到期，因此，我希望尽快回复您。 

$(document).ready(function(){
  $("h1").mouseenter(function() {
$("#celery").addClass("apple ");   
 $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){                                                  
    $("th").css({"background-color": "red", "font-size": "200%"});  
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
     * {font-family: "Comic Sans MS", sans-serif;}
            table, th, td {
                border: 3px solid blue;
                border-collapse: collapse;
            }
            table {
                margin:auto;
            }
            td {
                width: 5%;
                padding: 10px;
                font-size: 10pt;
                text-align: center;
            }
            h1 {text-align: center}
       
        .celery {
           background-color:red
            
        }
        
        </style>
        
        
        <body class="siblings">
<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h1").mouseenter(function() {
$("#celery").addClass("apple ");   
 $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){                                                  
    $("th").css({"background-color": "red", "font-size": "200%"});  
  });



});

    </script>
</head>

<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
</body>
</html>
jquery css styles
1个回答
0
投票

您可以通过这种方式解决它

$("th").mouseenter(function(){  
    $(this).css({"background-color": "red", "font-size": "200%"});  
  });
});

查看下面的演示

$(document).ready(function(){
  $("h1").mouseenter(function() {
      $("#celery").addClass("apple ");   
      $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){  
    $(this).css({"background-color": "red", "font-size": "200%"});  
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
     * {font-family: "Comic Sans MS", sans-serif;}
            table, th, td {
                border: 3px solid blue;
                border-collapse: collapse;
            }
            table {
                margin:auto;
            }
            td {
                width: 5%;
                padding: 10px;
                font-size: 10pt;
                text-align: center;
            }
            h1 {text-align: center}
       
        .celery {
           background-color:red
            
        }
        
        </style>
        
        
        <body class="siblings">
<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.