IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jQuery小案例:小商城 -> 正文阅读

[JavaScript知识库]jQuery小案例:小商城

?上边的是要求,下边的是代码,原创不易,点个赞再走吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>增减购物车商品信息 </title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >

*{
	font-size:12px;
}

</style>

</head>
<body> 
    <script>

          function checkAll(params) {
            $.each($('table tr td input'), function (index, value) {
                $(this).prop('checked',$('#checkall').prop('checked'));
            })

        }
            function del(th) {
                var s=$(th).parent().parent().remove();
            }
            function on(p) {
                var sa=$('#san').text();
                var an=$('#sj').text();
                var a=parseFloat($(p).parent().prev().text());
                var sl=parseInt($(p).parent().find('input').val())
                var ssd=$(p).parent().parent().children('td').eq(1).children('a').text()
                var t=sa==ssd
                console.log(sa+ssd);
                console.log(t);
                
                if (t) {
                    var s=39.2*sl
                    $(p).parent().prev().html(parseFloat('32.9')*sl)
                }else{
                    $(p).parent().prev().html(parseFloat('3339')*sl)
                }
           
            }
            function add(th) {

               var sl= $(th).prev().val() 
               $(th).prev().val(parseFloat(sl)+1) 
               on(th)
            }
            function rm(params) {
                $.each($('table tr td input'), function (index, value) {
                    if ($(this).prop('checked')) {
                        del(this)
                    }
                    
                })
            }
            function j(th) {

                var sl= $(th).next().val()
                
                if (sl>=1) {
                    $(th).next().val(parseFloat(sl)-1) 
                     on(th)
                }
            
            }
            function ad(th) {    
               var s= parseInt(Math.random()*2)+1
               
               var v= $('table tr').eq(s).children('td').eq(3).find('input').val()
               var vv=parseInt(v)+1
               $('table tr').eq(s).children('td').eq(3).find('input').val(vv)
                on($('table tr').eq(s).children('td').eq(3).find('input'))
                
                    
             
            }
    </script>
<table border="1" cellpadding="0" cellspacing="0"> 
	<tr>
    	<th><input type='checkbox' onclick="checkAll(this)" id="checkall"/>全选</th>
        <th>商品信息</th>
        <th>宜美惠价</th>
        <th>数量</th>
        <th>操作</th>
        
    </tr>

   	<tr class="tr_0">
       	<td>
           	<input name="" type="checkbox" value=""/>
           </td>
           <td>
           	<img src="images/sang.gif" class="products"  onclick="add(this)"/><a id='san' href="#">天堂雨伞</a></td><td>32.9
           </td>
           <td>
         	<img src="images/subtraction.gif" width="20" height="20" onclick="j(this)"/>
           	<input type="text" class="quantity" value="1" onchange="on(this)"/>
           	<img src="images/add.gif" width="20" height="20" onclick="add(this)"/>
          </td>
          <td>
            <button type="button" class="layui-btn layui-btn-primary" onclick="del(this)">删除</button> 
          </td>
       </tr>
       <tr>
       	<td>
           	<input name="" type="checkbox" value=""/>
           </td>
           <td>
           	<img src="images/iphone.gif" class="products" onclick="add(this)" /><a id='sj' href="#">苹果手机iphone5</a></td><td>3339
           </td>
           <td>
         	  	<img src="images/subtraction.gif" width="20" height="20"/>
           	<input type="text" class="quantity" value="1" onchange="on(this)"/>
           	<img src="images/add.gif" width="20" height="20" onclick="add(this)"/>
          </td>
          <td>
          		<button type="button" class="layui-btn layui-btn-primary" onclick="del(this)">删除</button> 
          </td>
       </tr>

 </table>
 
 <button type="button" class="layui-btn layui-btn-primary" onclick="ad(this)">添加</button> 
 <button type="button" class="layui-btn layui-btn-primary" onclick="rm(this)">删除</button> 
</body>

</html>

?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-31 16:32:00  更:2021-07-31 16:32:31 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/7 3:51:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码