<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../layui/css/layui.css">
<link rel="stylesheet" href="../../c_style/css.css">
<link rel="stylesheet" href="../../c_style/shop.css">
</head>
<body>
<div>
<div class="shop-container">
<div class="shop-container-table-box">
<table>
<colgroup>
<col width="5%">
<col width="8%">
<col width="13%">
<col width="11%">
<col width="8%">
<col width="8%">
<col width="15%">
<col width="5%">
<col width="10%">
<col width="5%">
</colgroup>
<thead>
<tr>
<th>
<div class="th-center">
<input type="checkbox" name="favorite" value="1"/>全选
</div>
</th>
<th>图片</th>
<th>品牌/名称/供应商编码</th>
<th>规格型号/出厂编码</th>
<th>包装规格</th>
<th>商品品质/产地</th>
<th>适配车型</th>
<th>替换件</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="ml10" type="checkbox" name="favorite" value="1"/>
</td>
<td>
<img
src="https://upload.jianshu.io/users/upload_avatars/14368237/e85f3cbe-9fc7-46e1-b43e-eaa734694690.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp"
alt="">
</td>
<td>
<div class="td-containe">
<p>品牌/名称</p>
<span>2218-18MMX25M</span>
</div>
</td>
<td>
<div class="td-containe">
<span>2218-18MMX25M</span>
<span>2218-18MMX25M</span>
</div>
</td>
<td>
<span>包装规格</span>
</td>
<td>
<span>原厂</span>
<span>北京</span>
</td>
<td>
<div class="td-containe">
<span>适配车型适配车型，多了换行展示多了很长很长很长适配车型适配车型，多了换行展示多了很长很长很长</span>
</div>
</td>
<td>
<span class="color-blue">32</span>
</td>
<td>
<span><span class="rmb-title-2">￥400.00</span>（单位）</span>
</td>
<td>
<div class="count-input">
<div class="count-input-btn count-input-btn-add">+</div>
<input type="text" value="1">
<div class="count-input-btn count-input-btn-sub">-</div>
</div>
</td>
<td>
<span><span class="rmb-title">￥4000.00</span></span>
</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr>
<td>
<input class="ml10" type="checkbox" name="favorite" value="1"/>
</td>
<td>
<img
src="https://upload.jianshu.io/users/upload_avatars/14368237/e85f3cbe-9fc7-46e1-b43e-eaa734694690.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp"
alt="">
</td>
<td>
<div class="td-containe">
<p>品牌/名称</p>
<span>2218-18MMX25M</span>
</div>
</td>
<td>
<div class="td-containe">
<span>2218-18MMX25M</span>
<span>2218-18MMX25M</span>
</div>
</td>
<td>
<span>包装规格</span>
</td>
<td>
<span>原厂</span>
<span>北京</span>
</td>
<td>
<div class="td-containe">
<span>适配车型适配车型，多了换行展示多了很长很长很长适配车型适配车型，多了换行展示多了很长很长很长</span>
</div>
</td>
<td>
<span class="color-blue">32</span>
</td>
<td>
<span><span class="rmb-title-2">￥400.00</span>（单位）</span>
</td>
<td>
<div class="count-input">
<div class="count-input-btn count-input-btn-add">+</div>
<input type="text" value="1">
<div class="count-input-btn count-input-btn-sub">-</div>
</div>
</td>
<td>
<span><span class="rmb-title">￥4000.00</span></span>
</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
<tr class="table-interval">
<td colspan="12">失效商品</td>
</tr>
<tr class="disabled-tr">
<td>
<div class="disabled-tag">失效</div>
</td>
<td>
<img
src="https://upload.jianshu.io/users/upload_avatars/14368237/e85f3cbe-9fc7-46e1-b43e-eaa734694690.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/90/h/90/format/webp"
alt="">
</td>
<td>
<div class="td-containe">
<p>品牌/名称</p>
<span>2218-18MMX25M</span>
</div>
</td>
<td>
<div class="td-containe">
<span>2218-18MMX25M</span>
<span>2218-18MMX25M</span>
</div>
</td>
<td>
<span>包装规格</span>
</td>
<td>
<span>原厂</span>
<span>北京</span>
</td>
<td>
<div class="td-containe">
<span>适配车型适配车型，多了换行展示多了很长很长很长适配车型适配车型，多了换行展示多了很长很长很长</span>
</div>
</td>
<td>
<span>32</span>
</td>
<td>
<span><span class="rmb-title-2">￥400.00</span>（单位）</span>
</td>
<td>
<div class="count-input count-input-disabled">
<div class="count-input-btn count-input-btn-add ">+</div>
<input type="text" value="1">
<div class="count-input-btn count-input-btn-sub">-</div>
</div>
</td>
<td>
<span><span class="rmb-title">￥4000.00</span></span>
</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="table-operation">
<input type="checkbox" name="favorite" value="1"/><span class="ml10">全选</span>
<a class="ml10" href="javascript:;">删除</a>
<a class="ml10" href="javascript:;">清空失效宝贝</a>
<div class="right-oper">
<span class="ml10">共选商品 <span class="color-orange">3</span>种，总数量<span class="color-orange">3</span></span>
<span class="ml10">合计金额 <b class="color-orange">￥111111</b></span>
<div class="buy-btn ml10">立即购买</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.count-input-btn-add').on('click',function (e) {
if($(e.target).parent().hasClass('count-input-disabled')) return
$(e.target).parent().children('input').attr('value',~~$(e.target).parent().children('input').attr('value')+1)
})
$('.count-input-btn-sub').on('click',function (e) {
if($(e.target).parent().hasClass('count-input-disabled')) return
$(e.target).parent().children('input').attr('value',~~$(e.target).parent().children('input').attr('value')-1>0?~~$(e.target).parent().children('input').attr('value')-1:1)
})
})
</script>