makc9I,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
<!-- div div, span, button {
float: left;
text-align: center;
width: 200px;
}
div.order_box {
width: 404px;
}
-->
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$(".free").mouseenter(function () {
$(this).text("бронь").css({
"background": "#FAD400",
"color": "#0000CD"
})
}).mouseleave(function () {
$(this).text("свободно").css({
"background": "",
"color": ""
})
}).click(function () {
var parent = $(this).parent();
var i = $(this).hasClass("seat3")? 0 : 1;
$(this).replaceWith($("<button/>", {
"text": "OK",
"css": {
"float": i ? "right" : "left"
},
"click": function () {
i++;
alert($(".seat" + i, parent).text());
i--;
$(this).replaceWith($("<span/>", {
"text": "заказ принят",
"css": {
"border": "#32CD32 solid 1px",
"color": "#0000FF",
"float": i ? "right" : "left"
}
}))
}
}));
});
})
</script>
</head>
<body>
<div class="order_box"> <span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<br>
<div class="seat1 place">Иванов Иван</div>
<div class="seat2 place">Сидоров Василий</div>
<br>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<br>
</div>
<br>
<div class="order_box"> <span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<br>
<div class="seat1 place">Иванов Иван1</div>
<div class="seat2 place">Сидоров Василий1</div>
<br>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<br>
</div>
<br>
<div class="order_box"> <span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<br>
<div class="seat1 place">Иванов Иван2</div>
<div class="seat2 place">Сидоров Василий2</div>
<br>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<br>
</div>
</body>
</html>