qwerty14,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
tr .th, tr.active .th1 {
display: table-row;
}
tr .th1, tr.active .th {
display: none;
}
.tdClick {
cursor: pointer;
}
</style>
</head>
<body> <table>
<tr>
<th width="870px"><span class="th">Начальное общее образование</span><span class="th1">(1 уровень - 1-4 класс) - срок обучения 4 года;</span></th>
<td width="70px"><span class="tdClick">просмотр</span></td>
</tr>
<tr>
<th><span class="th">Основное общее образование</span><span class="th1">(2 уровень - 5-9 класс) - срок обучения 5 года;</span> </th>
<td width="70px"><span class="tdClick">просмотр</span></td>
</tr>
<tr>
<th><span class="th">Срок обучения в школе - интернате</span><span class="th1">Срок обучения - 9 лет</span></th>
<td width="70px"><span class="tdClick">просмотр</span></td>
</tr>
</table>
<script>
window.addEventListener("DOMContentLoaded", function() {
var b = document.querySelectorAll("tr");
[].forEach.call(b, function(a) {
a.querySelector(".tdClick").addEventListener("click", function() {
a.classList.toggle("active")
})
})
});
</script>
</body>
</html>
