<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<table id="tableExample" border="1">
<tr>
<th>Name</th>
<th>Port</th>
<th>KeyManager</th>
<th>x</th>
<th>y</th>
<th>z</th>
<th>w</th>
</tr>
<tr>
<td>DSW1...</td>
<td>8445</td>
<td colspan="5" style="text-align: center;"><a class="health-check-button" href="#">health check</a></td>
<td class="health-check-cell" style="display: none;">2</td>
<td class="health-check-cell" style="display: none;">OK</td>
<td class="health-check-cell" style="display: none;">3</td>
<td class="health-check-cell" style="display: none;">OK</td>
<td class="health-check-cell" style="display: none;">5</td>
</tr>
<tr>
<td>DSW2...</td>
<td>1000</td>
<td colspan="5" style="text-align: center;"><a class="health-check-button" href="#">health check</a></td>
<td class="health-check-cell" style="display: none;">1</td>
<td class="health-check-cell" style="display: none;">NOK</td>
<td class="health-check-cell" style="display: none;">A</td>
<td class="health-check-cell" style="display: none;">OK</td>
<td class="health-check-cell" style="display: none;">X</td>
</tr>
</table>
</body>
</html>
$(function(){
$("#tableExample").on("click", ".health-check-button", function(e){
var elem = e.target;
$(elem).closest("td").css("display", "none");
$(elem).closest("tr").children(".health-check-cell").css("display", "table-cell");
});
});