0

また、リンクを作成する方法についてのヒントを提供してください. 少し正しい方向を指す必要があります。

ありがとう

<!DOCTYPE html> 
<html>
  <head>
    <title></title>
    <style> 
      table, th, td  {
        border: 1px solid black; 
      }

      tr.nice td {
        background: #FAFAD2; 
      }

      tr.mouseon td {
        background: #1E90FF; 
      }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type ="text/javascript"> 
      $("table1 tr).addClass("nice); 
      $("#table1 th").mouseover(function() { $(this).addClass("mouseon"); 
      $("#table1 th").mouseout(function() {  $(this).removeClass("mouseon"); 
    </script>
  </head>
  <body>
    <div id="table1">
      <table>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
        </tr>
          <tr>
            <td>A1</td>
            <td>B1</td>
          </tr>
      </table>
    </div>
  </body>
</html>
4

3 に答える 3

0

スクリプトと CSS に次の変更が必要です。

脚本 ：

$(document).ready(function(){
$("#table1 table tr").addClass("nice"); 
$("#table1 th").hover(function() { 
    $(this).addClass("mouseon"); 
},
    function() {
        $(this).removeClass("mouseon"); 
    });
});

CSS:

table, th, td  {
    border: 1px solid black; 
}

tr.nice td {
    background:  #FAFAD2; 
}

.mouseon {
    background: #1E90FF; 
}
于 2013-09-27T07:49:50.463 に答える
0

" と ( ) が欠落しているエラーがたくさんあります。Notepad++ や Dreamweaver などの構文強調表示機能を備えたエディターを使用する必要があります。これを行うには 2 つの方法を投稿しました。

スクリプト タグが間違っています。修理済み：

<script type ="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

方法 1

<script type="text/javascript"> 
$(document).ready(function(){
  $("#table1 tr").addClass("nice"); 
  $("#table1 th").on("mouseover", function() {
    $(this).addClass("mouseon");
  }); 
  $("#table1 th").on("mouseout", function() { 
    $(this).removeClass("mouseon");
  });
});
</script>

方法 2

<script type="text/javascript"> 
$(document).ready(function(){
  $("#table1 tr").addClass("nice"); 
  $("#table1 th").hover(function() {
    // mouseON
    $(this).addClass("mouseon");
  }, function(){
    // mouseOUT
    $(this).removeClass("mouseon");
  }); 
});
</script>

単純

CSS を使用することもできます。

<style type="text/css">
#table1 th {
   background: black; /* standart bg */
}
#table1 th:hover {
   background: red /* new bg */
}
</style>
于 2013-09-27T07:43:36.370 に答える