Need to access the <td> with the help of the classname - html

Question

I need to apply styles to the entire row based on some condition check on the class name.
My table structure looks like:
<table>
<tbody>
<tr>
<td><div><span class='level2'></span></div></td>
<td></td>
<td></td>
</tr>
<tr>
<td><div><span class='level90'></span></div></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I need to apply the styles to the rest of the <td> in a row that contains class name as 'level2' in the first <td>.
How do I traverse through the <tr> till the <span> and apply the styles to the <td>'s of same row?
I did try something:
var els = document.getElementById("ratiosTable").getElementsByClassName("Level2");
console.log(els);
for (var i = 0; i < els.length; i++) {
els[i].style.fontWeight = "bold"
}

Answer 1

OPTION 1
You can iterate the rows and check that it has a child of the expected class.
var rows = document.getElementById("ratiosTable").getElementsByTagName("tr");
console.log(rows);
for(var i = 0; i < rows.length; i++){
if(rows[i].getElementsByClassName("level2").length > 0) {
rows[i].style.fontWeight = "bold"
}
}
<table id="ratiosTable">
<tbody>
<tr>
<td>
<div><span class='level2'>Bold</span></div>
</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>
<div><span class='level90'>Not Bold</span></div>
</td>
<td>N</td>
<td>N</td>
</tr>
</tbody>
</table>
OPTION 2
This does not work on IE but does on all other major browsers including Edge. For more information : https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
var els = document.getElementById("ratiosTable").getElementsByClassName("level2");
console.log(els);
for (var i = 0; i < els.length; i++) {
//NOTE closest
els[i].closest("tr").style.fontWeight = "bold"
}
<table id="ratiosTable">
<tbody>
<tr>
<td>
<div><span class='level2'>Bold</span></div>
</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>
<div><span class='level90'>Not Bold</span></div>
</td>
<td>N</td>
<td>N</td>
</tr>
</tbody>
</table>