CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paran0a
Paran0a

Reputation: 3447

Focus on a "row" in a table where 2 rows represent 1 dataset

Here a demo of my example https://jsfiddle.net/aj8asqz6/

    <tr data-num="2">
        <td colspan="1">nrdsdrr</td>
        <td colspan="4">eedasdee</td>
    </tr>
    <tr data-num="2">
        <td>dadsad</td>
        <td>adsadad</td>
        <td>ffdasdf</td>
        <td>#dsadg</td>
        <td>fdsad</td>
    </tr>

As you can see every 2 rows belong to 1 dataset from my DB. When I click on of the tr I do some kind of action with JS.

The problem is that the user can forget which one he clicked on since the table doesn't change. And I don't want to only highlight the row that he clicked on since there are 2 that are relevant in each case.

So for example if he clicks on the last row, or the row before my table would look like this.

https://jsfiddle.net/aj8asqz6/1/

Upvotes: 0

Views: 90

Answers (1)

Justas
Justas

Reputation: 553

$('tr').click(function(){
    var parent = $(this).parent();
    var dataNum = $(this).attr('data-num');
   	$(parent).find('[data-num="' + dataNum + '"]').addClass('active');
});
table { border-collapse: collapse;}
td {border : 1px solid black;}
.active {background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr data-num="1">
            <td colspan="1">Wup</td>
            <td colspan="4">Wep</td>
        </tr>
        <tr data-num="1">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </thead>
    <tbody>
        <tr data-num="1">
            <td colspan="1">nrrr</td>
            <td colspan="4">eeee</td>
        </tr>
        <tr data-num="1">
            <td>da</td>
            <td>aad</td>
            <td>fff</td>
            <td>#g</td>
            <td>fd</td>
        </tr>
        <tr data-num="2">
            <td colspan="1">nrdsdrr</td>
            <td colspan="4">eedasdee</td>
        </tr>
        <tr data-num="2">
            <td>dadsad</td>
            <td>adsadad</td>
            <td>ffdasdf</td>
            <td>#dsadg</td>
            <td>fdsad</td>
        </tr>
    </tbody>
</table>

Upvotes: 2

Related Questions