Change CSS of specific row on click instead of the button

Question

So I have this button, you click it and it changes the background color from blue to red. If I wanted to have that button change the row background color instead, how would I do that? This is in a loop too so all the classes are the same, I use the below code so it only changes whatever I clicked instead of everything with that class.

script

<script type="text/javascript">
$('.a-row').on('click', '.H', function () {
    $( this ).css( "background-color", "red" );
});
</script>

html/php

<tr class="a-row">
 <td><p class="pname"><?=$row["Name"]?></p><p class="clickbutt H">H</p></td>
 <td>stuff</td>
 <td>stuff2</td>
 <td>stuff3</td>
</tr>

LTasty · Accepted Answer · 2016-03-27 20:03:47Z

1

You can use .parents() method

<script type="text/javascript">
$('.a-row').on('click', '.H', function () {
    $( this ).parents("tr").css( "background-color", "red" );
});
</script>

Example

edited Mar 27, 2016 at 20:03

answered Mar 27, 2016 at 19:57

LTasty

2,00815 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Process · Accepted Answer · 2016-03-27 19:59:16Z

1

You can use .closest('tr'):

$('.a-row').on('click', '.H', function () {
    $(this).closest('tr').css( "background-color", "red" );
});

jquery .closest()

answered Mar 27, 2016 at 19:59

The Process

5,9533 gold badges33 silver badges41 bronze badges

Comments

T Karropoulos · Accepted Answer · 2016-03-27 20:04:20Z

1

You can try the .closest() method of jquery like so.

<script type="text/javascript">
 $('.H').on('click', function () {
  $( this ).closest.('tr').css( "background-color", "red" );
 });
</script>

You can check out the documemtation here. https://api.jquery.com/closest/

Hope this wasa helpful.

answered Mar 27, 2016 at 20:04

T Karropoulos

615 bronze badges

Collectives™ on Stack Overflow

Change CSS of specific row on click instead of the button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related