CODEWITHSUNDEEP
jquerycssdomhtml-table
Kyle Dunne
Kyle Dunne

Reputation: 231

Change CSS of specific row on click instead of the button

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>

Upvotes: 1

Views: 648

Answers (3)

T Karropoulos
T Karropoulos

Reputation: 61

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.

Upvotes: 1

LTasty
LTasty

Reputation: 2008

You can use .parents() method 

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

Example

Upvotes: 1

The Process
The Process

Reputation: 5953

You can use .closest('tr'):

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

jquery .closest()

Upvotes: 1

Related Questions