1. 首页
  2. 问答
  3. 更改悬停的表格文本

更改悬停的表格文本

2017-07-21 163 views
1

我创建了一个小的JS，它可以在悬停时更改值，稍后会更改它的样子。我的表格由每个标题下有3列构建而成。我想要实现的是，如果您将某个列悬停，则会将文本更改为示例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>

来源

2017-07-21 Lewis Larf

+0

它的发生，因为你要删除这是2px的边框，因此被去除去除X 2px的边框数，并且表进行调整。 – inarilo

+0

@inarilo发生这种情况的原因可能更多。文字太大，将其他大小调整为相同大小 –

+0

你是对的，第一次是因为文本，之后，这是因为边界 – inarilo

回答

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>

来源

2017-07-21 23:05:22 Omi

+0

是否可能以某种方式使'5000'与它旁边的两列重叠？ （那些将被设置为空的） –

+0

你想隐藏其他'0'''并且在三个coulmns中只显示5000？ – Omi

+0

对不起，我忘了先前添加CSS。我编辑了第一篇文章，现在应该更有意义。 –

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将改为切换“红细胞”类，而不是尝试处理所有样式的内联样式。

这里有一个更新的例子小提琴使用您提供的标记：https://jsfiddle.net/mas51s6j/1/

来源

2017-07-21 23:06:36

+0

对不起，我忘了先前添加CSS。我编辑了第一篇文章，现在应该更有意义。 –

+0

啊是的 - 你可以改变红色透明：https://jsfiddle.net/mas51s6j/3/这将使它的外观占用所有三个单元，并没有在那里的抖动。 –

+0

谢谢，你能尝试使用我添加的CSS实现同样的事情（使用相同的大小）吗？ –

相关问题

 相关问题