Level 80
@daniel1836 IDs should only be used once on a page. If you want to apply styles to multiple elements, use a class (i.e. `.highlight) instead of an ID.
May 25, 2021
7
Level 6
How to use 'this' keyword with onclick function.
I know this is probably not the best method to use, but try to help me out.
I want to highlight my table's row on submit. To indicate it has been affected.
I have an onclick function inside a button in my table. It is within a while loop.
onlick="my function(this)"
I have my row defined by an ID.
Inside my JavaScript function I want to use jQuery to style that ID.
$('#highlight').css("background-color","grey");
Right now, it only highlights the first row of the table.
How do I make it find the current row of the button clicked and highlight that row?
Thanks
Level 6
I changed it to a class. Now it highlights all rows because of the while loop. I still need to implement 'this' to target only the current row.
Level 54
@daniel1836 can you show your code please?
You shouldn’t need to physically add onclick to each row,
Something like
$(‘button’).click(function(){
$(this).parent(‘td’).parent(‘tr’).addClass(‘.highlight’)
})
Should select the row your button is in when you click it.
Level 6
I'll post it in it's entirety, even though it's a lot.
My JavaScript function:
function updateScoreModal(reference,id,home,away,homeScore,awayScore,league_id,team_id){
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
$('#highlight').css("background-color","grey");
}
}
xmlhttp.open("POST","../_managers/manage_"+ reference +"_FUNCTIONS.php?action=updateScore&gameid=" + id + "&home=" + home + "&away=" + away + "&homeScore=" + homeScore + "&awayScore=" + awayScore + "&league_id=" + league_id + "&team_id=" + team_id,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
}
My PHP and table:
while ( $row = mysqli_fetch_array($sql_result)){
echo '<tr id="highlight">';
<td>...</td>
<button id='updateScoreBtn' type="button" class="btn btn-sm btn-info" onclick="updateScoreModal('LEAGUES','<?php echo $game_id ?>','<?php echo $home_team_name ?>','<?php echo $away_team_name ?>','<?php echo $home_team_score ?>','<?php echo $away_team_score ?>','<?php echo $league_id ?>',this)">Score</button>
}
Level 6
The issue i'm having, is that the highlighting is applied to only one row or all (depending on class or id) because of the while loop for my SQL table. But I can't get it to target the specific row in question.
Level 6
My thinking is: passing 'this' to my function will give me access to that current object. (including everything in the loop, (the target row ID) that the button is inside).
I want to know how to use jQuery to use 'this' and the ID to apply CSS.
Level 75
See this post and look at the stack Overflow article I reference. https://laracasts.com/discuss/channels/javascript/jquery-td-to-javascript-td
See the addRowHandlers function I used.
Also the original question is done in jQuery. That part works. The
$(this).closest('tr')
Part.
Please or to participate in this conversation.