ホバー上のテーブルテキストを変更する

Question

ホバーの値を変更し、後ほどホバーのように変更する小さなJSを作成しました。私のテーブルは、各ヘッダーの下に3つの列を持つことによって構築されます。私が達成しようとしているのは、列の1つをホバリングすると、テキストが例5000に変更されますが、必要に応じてその横の他の列を通過する必要がある場合は、現時点では私のコードを読んで、中間の列に5000を追加するように設定していますので、その下にある列はそれによってサイズが変更されます。

私が達成しようとしていることを明確にするには、中間の列のテキストを5000に変更し、そのために他の列のサイズを変更しないでください。

$(document).ready(function() { 
 
    $('.wep-data-P1').on({ 
 
     mouseenter: function() { 
 
      $('.wep-data-P1').html('5000'); 
 
      $('.wep-data-P1').first().html(''); 
 
      $('.wep-data-P1').last().html(''); 
 
      $('.wep-data-P1').css('border-right', 'none'); 
 
      $('.wep-data-P1').css('border-left', 'none'); 
 
     }, 
 
     mouseleave: function() { 
 
      $('.wep-data-P1').html('5000'); 
 
      $('.wep-data-P1').first().html('0'); 
 
      $('.wep-data-P1').last().html('0'); 
 
      $('.wep-data-P1').css('border-right', '2px solid #ccc'); 
 
      $('.wep-data-P1').css('border-left', '2px solid #ccc'); 
 
     } 
 
    }); 
 
\t });

.wep-name{ 
 
    width: 295px; 
 
} 
 
.wep-data{ 
 
    width: 40px; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
.wep-cond{ 
 
    text-align: center; 
 
} 
 
table, th, td { 
 
    margin: 5px; 
 
    font-size: 18px; 
 
} 
 

 
th{ 
 
    border-bottom: 2px solid #ccc; 
 
    border-right: 2px solid #ccc; 
 
} 
 

 
td{ 
 
    border-bottom: 2px solid #ccc; 
 
    border-right: 2px solid #ccc; 
 
    border-left: 2px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th colspan="3" class="wep-cond">P1</th> 
 
      <th colspan="3" class="wep-cond">P2</th> 
 
      <th colspan="3" class="wep-cond">P3</th> 
 
      <th colspan="3" class="wep-cond">P4</th> 
 
      <th colspan="3" class="wep-cond">P5</th> 
 
     </tr> 
 
     <tr> 
 
      <td class="wep-name">Apple</td> 
 
      <td class="wep-data wep-data-P1">0</td> 
 
      <td class="wep-data wep-data-P1">0</td> 
 
      <td class="wep-data wep-data-P1">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="wep-name">Banana</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="wep-name">Pineapple</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
     </tr> 
 
    </table>

Answer 1

あなたはtd

$(document).ready(function() { 
 
    $('.wep-data-P1').on({ 
 
     mouseenter: function() { 
 
      $('.wep-data-P1').html('5000'); 
 
      $('.wep-data-P1').first().html(''); 
 
      $('.wep-data-P1').last().html(''); 
 
      
 
     }, 
 
     mouseleave: function() { 
 
      $('.wep-data-P1').html('5000'); 
 
      $('.wep-data-P1').first().html('0'); 
 
      $('.wep-data-P1').last().html('0'); 
 
    
 
     } 
 
    }); 
 
\t });

.wep-name{ 
 
    width: 15%; 
 
} 
 
.wep-data{ 
 
    width: 5%; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
.wep-cond{ 
 
    text-align: center; 
 
} 
 
table, th, td { 
 
width:100%; 
 
    margin: 5px; 
 
    font-size: 18px; 
 
} 
 

 
th,td{ 
 
    border-bottom: 2px solid #ccc; 
 
    border-right: 2px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
     <tr> 
 
      <th class="wep-name">Name</th> 
 
      <th colspan="3" class="wep-cond">P1</th> 
 
      <th colspan="3" class="wep-cond">P2</th> 
 
      <th colspan="3" class="wep-cond">P3</th> 
 
      <th colspan="3" class="wep-cond">P4</th> 
 
      <th colspan="3" class="wep-cond">P5</th> 
 
     </tr> 
 
     <tr> 
 
      <td class="wep-name">Apple</td> 
 
      <td class="wep-data wep-data-P1">0</td> 
 
      <td class="wep-data wep-data-P1">0</td> 
 
      <td class="wep-data wep-data-P1">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="wep-name">Banana</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
     </tr> 
 
     <tr> 
 
      <td class="wep-name">Pineapple</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
      <td class="wep-data">0</td> 
 
     </tr> 
 
    </table>

Answer 2

に一定の幅を設定することにより、あなたはテーブル自体のためにいくつかのサイズを設定する必要があることを行うことができます。

また、色やその性質の変更を修正して、CSSを使用して、作業に戻るときに少しでも論理的にすることをお勧めします。

これは私がテーブルには、その領域を埋めるために使用されるCSSです：

table{ 
     border-collapse: collapse; 
     border-width: 0px; 
     table-layout: fixed; 
     width: 100vw; 
    } 

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

テーブル上の境界は、細胞といくつかのわずかなジャンプが発生します - 私はそれがより滑らかに見えるようにするために国境崩壊を追加しました。

私はあなたに境界線の色を変更しようとしていたのを見ました - そのためにもCSSを追加して、その代わりにJavaScriptを使って "red-cell"クラスを切り替えます。

は、ここで指定したマークアップを使用して更新例フィドルます：https://jsfiddle.net/mas51s6j/1/