изменение значение value +-
by AJIEKCEU
HTML
<table class="table_tickets">
<thead>
<tr>
<td>Категория / зона</td>
<td>Осталось билетов</td>
<td>Цена</td>
<td>Количество</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<form method="get" action="">
<td>
<div class="icon_ticket_yellow"></div>55 билетов
</td>
<td>Партер 2</td>
<td>600<span class="rub">c</span></td>
<td>
<div class="table_col_tickets">
<div class="tickets_minus bg_table_col_left " ></div>
<div class="bg_table_col_center">
<input type="text" class="col_tickets" value="0" maxlength="2" />
</div><!-- close bg_table_col_center -->
<div class="tickets_plus bg_table_col_right"></div>
</div><!-- close table_col_tickets -->
</td>
<td><button type="submit" class="btn_order" >В корзину</button> </td>
</form>
</tr>
<tr>
<form method="get" action="">
<td>
<div class="icon_ticket_red"></div>55 билетов
</td>
<td>Партер 2</td>
<td>600<span class="rub">c</span></td>
<td>
<div class="table_col_tickets">
<div class="tickets_minus bg_table_col_left " ></div>
<div class="bg_table_col_center">
<input type="text" class="col_tickets" value="0" maxlength="2" />
</div><!-- close bg_table_col_center -->
<div class="tickets_plus bg_table_col_right"></div>
</div><!-- close table_col_tickets -->
</td>
<td><button type="submit" class="btn_order" >В корзину</button> </td>
</form>
</tr>
<tr>
<form method="get" action="">
<td>
<div class="icon_ticket_brown"></div>55 билетов
</td>
<td>Партер 2</td>
<td>600<span class="rub">c</span></td>
<td>
<div...
CSS
.table_tickets thead tr{background:url(/images/table_header.png) no-repeat;display:block;height:48px;width:960px;}
.table_tickets tbody tr{background:url(/images/table_line.png) left bottom repeat-x;display:block;height:67px;width:960px;}
.table_tickets tbody tr:hover{background:url(/images/bg_tr_hover.png) left bottom repeat-x;}
.table_tickets thead tr td{color:#666;font-size:10px;font-weight:700;padding:14px 0 0 15px;text-transform:uppercase;width:200px;}
.table_tickets thead tr td:nth-child(5){width:160px!important;}
.table_tickets tbody tr td{color:#333;font-size:12px;font-weight:700;padding:11px 0 0 15px;width:200px;}
.table_tickets tbody tr td:nth-child(5){padding-top:15px;width:160px!important;}
.icon_ticket_yellow,.icon_ticket_red,.icon_ticket_brown{float:left;height:17px;margin-right:5px;width:27px;}
.icon_ticket_yellow{background:url(/images/icon_ticket_yellow.png) no-repeat;}
.icon_ticket_red{background:url(/images/icon_ticket_red.png) no-repeat;}
.icon_ticket_brown{background:url(/images/icon_ticket_brown.png) no-repeat;}
.btn_order{-moz-border-radius:4px;-webkit-border-radius:4px;border:2px solid #598ce1;border-radius:4px;color:#598ce1;font-size:15px;font-weight:700;height:30px;text-align:center;text-decoration:none!important;width:130px;}
.btn_order:hover{border:2px solid #dd2d00;color:#dd2d00;}
.bg_table_col_left,.bg_table_col_right{height:21px;width:21px;}
.bg_table_col_left{background: #000 url(/images/bg_table_col_left.png) no-repeat;float:left;padding-left:1px;}
.bg_table_col_right{background:#000 url(/images/bg_table_col_right.png) no-repeat;float:left;margin-right:-1px;}
.bg_table_col_center{background:url(/images/bg_table_col_center.png) repeat-x;float:left;height:21px;margin-left:-1px;padding:1px 1px 0;width:19px;}
.bg_table_col_center input{background:transparent;border:none;color:#666!important;font-size:10px!important;height:12px;text-align:center;width:17px;}
.table_col_tickets{height:21px;position:relative;top:8px;width:70px;}
JavaScript
$(document).ready(function() {
$(".tickets_plus").click(function(){
var data = $(this).prev().children().val();
if (data>=0){ $(this).prev().children().val(parseInt(data)+1);
}
return false});
$(".tickets_minus").click(function(){
var data = $(this).next().children().val();
if (data>0){
$(this).next().children().val(parseInt(data)-1);
}
return false});
});