Demo - JSFiddle[
^]
try
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.seat {
height: 20px;
width: 20px;
border: 1px solid gray;
cursor:pointer;
background-color:white;
}
.walk{
padding-left:20px;
}
#driver {
background-color:gray;
height: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div style="border:1px solid gray; width:130px;">
<table>
<tr>
<td colspan="4"></td>
<td align="right"> <div id="driver"></div> </td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
</table>
</div>
<script>
allSeats = document.querySelectorAll('.seat');
for (var i = 0; i < allSeats.length; i++) {
var seat = allSeats[i];
seat.addEventListener('click', function () {
var bgclr = this.style.backgroundColor;
if(bgclr =='red')
this.style.backgroundColor = 'white'
else
this.style.backgroundColor = 'red'
debugger
}, false);
}
</script>
</body>
</html>