<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
table {
border: 1px solid black;
}
td {
border: 1px dotted gray;
height: 30px;
width: 30px;
}
.num{
cursor: pointer;
}
.active, th:first-of-type {
font-weight: bold;
color: #0000CD;
background-color: #DCDCDC;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var coasts = [[100, 200, 300],
[150, 250, 350],
[180, 280, 380]];
var title = ['Завтрак','Обед','Ужин'];
var sum = [];
$.each(coasts, function(c, d) {
var a = $("<tr/>", {
html: $("<td/>", {
text: title[c]
})
});
$.each(d, function(d, b) {
$("<td/>", {
"class": "num",
text: b,
click: function() {
sum[c] = b;
$("td", a).not($(this).addClass("active")).removeClass("active");
$("th:first").html("Итого: " + sum.reduce(function(a, b) {
return a + (b || 0)
}, 0))
}
}).appendTo(a).click()
});
a.appendTo($("table"))
});
});
</script>
</head>
<body>
<table width="400" >
<thead>
<tr><th></th>
<th>S</th>
<th>M</th>
<th>L</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>