caoyuanye
/
html-template


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!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>