Показать сообщение отдельно
  #8 (permalink)  
Старый 05.01.2016, 15:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

калькулятор тарифного плана

<!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>
Ответить с цитированием