<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<title> Test</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
</head>
<body class="">
<div class="box">
<div class="box-body">
<table border="1" id="task" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Commands</th>
<th>Created</th>
<th>Sent items</th>
<th>check</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>GET_MAIL</td>
<td>2019-09-28 00:13:16</td>
<td>262</td>
<td class="forImg"></td>
<td><button class="viewed">viewed</button></td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>GET_MAIL</td>
<td>2019-09-28 00:13:16</td>
<td>262</td>
<td class="forImg"></td>
<td><button class="viewed">viewed</button></td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>GET_MAIL</td>
<td>2019-09-28 00:13:16</td>
<td>262</td>
<td></td>
<td><button class="forImg viewed">viewed</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>.forImg{
background: green;
}$(document).ready(function() {
$("body").on("click", ".viewed", function() {
// это удаляет класс из кнопки
$(this).removeClass("forImg");
// это удаляет класс из соседней ячейки
$(this)
.closest("td")
.prev()
.removeClass("forImg");
});
});
External CSS
This Pen doesn't use any external CSS resources.