Jquery closest tr from this fails, why?

Jquery is not my strong suit. This seems logically correct though it is not working. I have searched everything from find, to closest, to this, etc. I cannot figure out why this is not working.

WHat I am trying to do is add a class to the closest tr when this <span> is clicked.

I get no errors, but I also get no results.

CODE:

$curTable .= "
    <tr bgcolor='#f2e2f2' onmouseover=style.backgroundColor='#FFFFFF'; onmouseout=style.backgroundColor='#f2e2f2';>
        <td>$typeSelect</td>
        <td>$cfilename</td>
        <td><input type='text' size='20' name='cexpDate' class='dp exp' value='$cexpDate' /><script type='text/javascript'>$('.dp').datetimepicker({format:'m/d/Y'});</script></td>
        <td>$catSelect</td>
        <td>$cdateAdded</td>
        <td>$caddedBy</td>
        <td><span class='mod' onclick=\"deleteFile('{$cid}','{$cfilename2}');\">delete</span> | <span class='mod' onclick='modFile($cid)'>modify</span></td>
    </tr>";

Jquery:

function deleteFile(fileId,fileName){
    var fileId = fileId;
    var fileName = fileName;
    var test = this;
    //alert(test);
    $(this).closest('tr').addClass("highlight");
    $('#submit').prop('disabled', true);
    $('#rmDeleteOverlay').fadeIn();
    $('#deleteFile').append("<br><br><center>"+fileName+"</center>");
}

CSS:

.highlight{
    background-color:#000;
}

Any help is appreciated.

function deleteFile(fileId,fileName){
	var fileId = fileId;
	var fileName = fileName;
	var test = this;
	//alert(test);
	$(this).closest('tr').addClass("highlight");
	$('#submit').prop('disabled', true);
	$('#rmDeleteOverlay').fadeIn();
	$('#deleteFile').append("<br><br><center>"+fileName+"</center>");
}

.highlight{
	background-color:#000;
	
}
.mod{
	cursor:pointer;
	color:#a45127;
}
.mod:hover{
	cursor:pointer;
	text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr bgcolor='#f2e2f2' onmouseover=style.backgroundColor='#FFFFFF'; onmouseout=style.backgroundColor='#f2e2f2';>
			<td><select name='type'><option value='spec'>SPEC</option><option selected value='clg'>CLG</option><option value='coa'>COA</option><option value='gmo'>GMO</option><option value='allergen'>ALLERGEN</option><option value='audit'>AUDIT</option><option value='cor'>COR</option><option value='organic'>ORGANIC</option><option value='kosher'>KOSHER</option><option value='oth'>OTHER</option></select></td>
			<td><a href='/uploads/rm/46/46_clg_20190620223443.pdf' target='_blank'>46_clg_20190620223443.pdf</a></td>
			
			<td><select name='cat'><option selected value='cur'>Current</option><option value='oth'>Other</option><option value='arc'>Archive</option></select></td>
			<td>2019-06-20 22:34:43</td>
			<td><a href='editUser.php?id=11'>11</a></td>
			<td><span class='mod' onclick="deleteFile('1','<a href=\'/uploads/rm/46/46_clg_20190620223443.pdf\' target=\'_blank\'>46_clg_20190620223443.pdf</a>');">delete</span> | <span class='mod' onclick='modFile(1)'>modify</span></td>
		</tr>

Solution

Thanks guys for all the information! Especially @Barmar & @sscotti

So as it turns out the issue was 3 fold.

Passing the element info to the function and the use of this. When calling the function behind the click event onClick="deleteFile()" I was trying to get the function to reference the clicked element and ignorantly assumed that element info was automatically passed. @Barmar pointed out that I needed to include this as a parameter in the function call.
The syntax I was using originally in the <tr> for the onMouse* events was incorrect. I was using onMouseOver=style.backgroundColor='#FFFFFF'; This was breaking the <tr> tag. I should have noticed this in jsFiddle, but I didn't. Thank you @sscotti for pointing that out. The line should have been onMouseOver="style.backgroundColor='#FFFFFF';" and similar for onMouseOut.
Further research based on @Barmar mentioning inline style overwriting the CSS lead me to CSS Specificity. Specificity is a basic browser rule with a point system. Where the victor will be the one with the most points. Inline style = 1000, id = 100, class = 10, element = 1.

Using the onMouse* events to change style was equal to 1000 points. I was tring to change that same style in my function by issuing an addClass() which is worth 10 points. The inline style declarations trumped that call, thus the class was ignored.

By removing the inline onMouse* style declarations from the <tr> and moving those to a css class it demoted them from worth 1000 points to being worth 10. Since they are now the same value as the addClass() another basic browser rule is used. When points match, last wins.

Thanks everyone who contributed and helped lead me to the answer. Yes I know some of my scripting is archaic and rudimentary. Perfection is a human bogeyman, IMO it doesn't exist. I live by function before form, but I love improving my practices.

Hope this helps someone.