在悬停时更改表格文本

时间：2017-07-21 22:53:37

标签： jquery html css

我创建了一个小JS，它可以改变悬停时的值，然后像以前一样改变它。我的表是通过在每个标题下有3列来构建的。我想要实现的是，如果您将其中一个列悬停，则会将文本更改为示例5000，但如果需要，则保持所有列大小相同，然后必须通过其他列它。目前通过阅读我的代码，我将其设置为在中间列中添加5000，因此其下的列会因此而调整大小。

要明确我要实现的目标是：将中间列文本更改为5000，而不是因为这一点而调整其他列的大小。

＆＃13;
＆＃13; 
$(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');
        }
    });
	});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：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/

答案 1 :(得分：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');
  
        }
    });
	});
.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>

相关问题
最新问题