js 实现商品加减

1.html：代码

1. <div id="container">
   			<table>
   				<tr>					
   					<td class="p-name">炊大皇牛排煎锅26cm健康无涂层厚铸铁煎盘条棱纹牛扒盘电磁炉通</td>
   					<td> 
   						<div class="quantity-form">
   							<a href="javascript:void(0)" class="decrement">-</a><input type="text"  class="itxt"/><a href="javascript:void(0)" class="increment">+</a>
   						</div>
   					</td>
   				</tr>
   				<tr>					
   					<td class="p-name">【京东超市】爱仕达 32CM油你控新不粘少烟炒锅CL32Y5WT-C 不沾锅少油烟电磁</td>
   					<td>
   						<div class="quantity-form">
   							<a href="javascript:void(0)" class="decrement">-</a>
   							<input type="text"  class="itxt"/>
   							<a href="javascript:void(0)" class="increment">+</a>
   						</div>
   					</td>
   				</tr>
   				<tr>					
   					<td class="p-name">华为 Mate9 Pro 4G手机 双卡双待 保时捷版 全网通6GB +256GB版</td>
   					<td>
   						<div class="quantity-form">
   							<a href="javascript:void(0)" class="decrement">-</a><input type="text"  class="itxt"/><a href="javascript:void(0)" class="increment">+</a>
   						</div>
   					</td>
   				</tr>
   				<tr>					
   					<td class="p-name">双立人（ZWILLING） Twin Point 红点中式菜刀 磨刀石（红色）两件套装 德国进口</td>
   					<td>
   						<div class="quantity-form">
   							<a href="javascript:void(0)" class="decrement">-</a>
   							<input type="text"  class="itxt"/>
   							<a href="javascript:void(0)" class="increment">+</a>
   						</div>
   					</td>
   				</tr>
   			</table>
   		</div>

   2.css：代码

<style>
			body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd{
				margin: 0;
				padding: 0;
			}
			ul,ol{
				list-style: none;
			}
			a{
				color: #000;
				text-decoration: none;
			}
			body{
				font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
			}
			table{
				width: 100%;
				border-collapse: collapse;
				border-spacing: 0;
			}
			input{
				outline: none;
			}
			#container{
				width: 90%;
				margin: 0 auto;
			}
			#container td{
				padding:10px;
				border:1px solid #ccc;
			}
			.p-name{
				width: 330px;
			}
			.quantity-form {
			    position: relative;
			    overflow: hidden;
			    height: 22px;
			    width: 80px;
			}			
			.increment,.decrement{
				border: 1px solid #cacbcb;
			    border-right: 0;
			    height: 18px;
			    line-height: 18px;
			    padding: 1px 0;
			    width: 16px;
			    text-align: center;
			    color: #666;
			    margin: 0;
			    background: #fff;
			}
			.increment{
			   float: right;
			   border: 1px solid #cacbcb;
			   border-left: 0;
			   color: #666;
			}
			.decrement {
 			   float: left;
			}
			
			.decrement.disabled, .increment.disabled {
    			cursor: default;
    			color: #e9e9e9;
			}
			.itxt {			    
			    border: 1px solid #cacbcb;
			    width: 42px;
			    height: 18px;
			    line-height: 18px;
			    text-align: center;
			    padding: 1px;
			    margin: 0;
			    font-size: 12px;
			    font-family: verdana;
			    color: #333;	
						    
			}
		</style>

 3.重点  来啦    JS  代码：

 

<script src="scripts/jquery-1.10.0.min.js"></script>
		<script>
			$(function(){
				//初始化
				$('.itxt').val('1');//获取文本框的值
				

				//加
				$('.increment').click(function(){
					$(this).prev().val(parseInt($(this).prev().val())+1);
					//单击加号时候  当前节点的上一个节点的值   等于   当前节点的上一个节点的值+1
					//$(this) 当前对象
					//prev() 上一个节点
					//parseInt 把文本框中的值 转换为整型（int）  如何不转换的话 获取到的可能是字符串（string)
					//如果获取到的是字符串  ，那么 文不框中的值会是  字符串+1   
				});

			

				//减
				$('.decrement').click(function(){
					$(this).next().val(parseInt($(this).next().val())-1);
					//和上面一样的 
					if( $('.itxt').val() <= 1 ){
						$('.itxt').val('1');//文本框中的值不能小于1  否则就等于1
					}
					
				});
				
			
			})
		</script>

不要忘记引入jQ插件；