JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<div id="object_data_body">

<table>
<tbody id="block">



	<tr> <!-- класс присвоить-->
		<td>
			<table>
				<tbody>
					<tr>
						<td align="left">
							<a href="#" class="link">this is link</a>
						</td>

						<td align="right">
							<font color="#000">
								<b>нейтрально</b>
							</font>
						</td>

						<td align="right">
							<span>
								<img class="zero" title="оповещение" src="https://home.yastatic.net/morda-logo/i/afisha_color_62.png">
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>



	<tr>
		<td>
			<table>
				<tbody>
					<tr>
						<td align="left">
							<a href="#" class="link">this is link</a>
						</td>

						<td align="right">
							<font color="#000">
								<b>нейтрально</b>
							</font>
						</td>

						<td align="right">
							<span>
								<img class="zero" title="оповещение" src="https://home.yastatic.net/morda-logo/i/afisha_color_62.png">
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>




	<tr>
		<td>
			<table>
				<tbody>
					<tr>
						<td align="left">
							<a href="#" class="link">this is link</a>
						</td>

						<td align="right">
							<font color="#000">
								<b>плохо</b>
							</font>
						</td>

						<td align="right">
							<span>
								<img class="status_off" title="оповещение" src="https://home.yastatic.net/morda-logo/i/afisha_color_62.png">
							</span>
						</td>
					</tr>
				</tbody>
			</table>
		</td>
	</tr>



	<tr>
		<td>
			<table>
				<tbody>
					<tr>
						<td align="left">
							<a href="#" class="link">this is link</a>
						</td>

						<td align="right">
							<font color="#000">
								<b>хорошо</b>
							</font>
						</td>

						<td align="right">
							<span>
								<img class="status_on" title="оповещение"...

CSS

.status_on_sort{
     background-color: #008000;
   }
.status_off_sort{
     background-color: #FF0000;
   }
.zero_sort{
    background-color: #5593B1;
}
td {
    padding:5px 20px;
}
table {
    width:100%;
}
a {
    color:#fff;
}

JavaScript

var images = document.getElementsByTagName('img');
var key = '_sort';

for(var i=0, last, parent; i < images.length;i++) {
    last = undefined;
    parent = images[i].parentNode;

    while(parent = parent.parentNode) {
        if(parent.tagName && parent.tagName.toLowerCase() == "tr") {
            last = parent;
        }
    }

    if(last != undefined) {
        last.classList.add(images[i].className + key);
    }
}