Katy93,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
.backg {
background-color: #000000;
}
.d.LightGrey{
background-color: LightGrey;
}
</style>
<script>
$(function() {
$("table").on("click", ".d", function() {
$(this).prevUntil(".backg").addBack().nextUntil(".backg").addBack().addClass("LightGrey");
})
});
</script>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="backg"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>