CODEWITHSUNDEEP
jqueryhtmlcss
Lewis Larf
Lewis Larf

Reputation: 143

Changing table text on hover

I've created a little JS which changes value on hover and later changes it like it was. My table is built by having 3 columns under each header. What I'm trying to achieve is that if you are hovering one of the columns it will change the text to example 5000 but keeps all the columns sizes same if needed it would have to go through those other columns next to it. As at the moment by reading my code I'm setting it to add the 5000 in the middle columns so columns which are under it will resize because of that.

To make it clear what I'm trying to achieve is: Changing middle column text to 5000 and not resizing other columns because of that.

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

Upvotes: 1

Views: 57

Answers (2)

Omi
Omi

Reputation: 4007

You can do that by setting fixed width to 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>

Upvotes: 1

Tim Elsass
Tim Elsass

Reputation: 1006

You need to set some sizes for you table itself.

I would also suggest for modifying the colors or changes of that nature to use CSS to make it all a bit more logical when you come back to work on it!

This is the CSS I used to make the table fill that area up:

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

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

The borders on tables will cause some slight jumps with the cells - I added border-collapse to make it appear more smooth.

I see you were trying to change the border colors - so I added the CSS for that as well, and then the javascript will instead toggle the "red-cell" class instead of trying to handle all your styles inline like that.

Here's an updated example fiddle using the markup you provided: https://jsfiddle.net/mas51s6j/1/

Upvotes: 2

Related Questions