混合开发（3）

最新推荐文章于 2022-04-20 13:42:09 发布
最新推荐文章于 2022-04-20 13:42:09 发布
阅读量155 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zpf_blog/article/details/79840690
版权



<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
        <script>
        $(function(){
            $("#insert").click(function(){
                var name=$("#name").val();
                var sex=$("#sex").val();
                var like=[];    
                $('input[name="like"]:checked').each(function(){
                  like.push($(this).val());
                  });
                var pro=$("#pro option:checked").text();
                var city=$("#city option:checked").text();
                if (name!="") {
                    if (name.length>=6&&name.length<=12) {
                        $("#tab").append("<tr style='text-align: center;'><td ><input type='checkbox' name='kk'></td><td>"+name+"</td><td>"+sex+"</td><td>"+like+"</td><td>"+pro+"-"+city+"</td><td><input type='button' id='del' value='删除' οnclick='dl(this)' style='background: yellow;border-radius: 5px;'/></td></tr>");
                
                    } else{
                        alert("用户名长度需在6-12位之间!");
                    }
                } else{
                    alert("请输入用户名!");
                }
            })
            dl=function(dd){
                $(dd).parent().parent().remove();
            }
            $("#ck").click(function(){
                var ck=$("#ck")[0].checked;
                var ckk=$("input[name='kk']");
                for (var i=0;i<ckk.length;i++) {
                    ckk[i].checked=ck;
                }
            })
            $("#delete").click(function(){
                var ce=$("input:checked[name='kk']");
                
                if (ce.length!=0) {
                    var f =confirm("确认删除?");
                    if(f){
                    for (var i=0;i<ce.length;i++) {
                    ce[i].parentNode.parentNode.remove();
                }
                    $("#ck")[0].checked=false;
                }
                } else{
                    alert("请选择数据");
                }
            })
            $("#quanxuan").click(function(){
                $("#ck")[0].checked=true;
                var ckk=$("input[name='kk']");
                for (var i=0;i<ckk.length;i++) {
                    ckk[i].checked=true;
                }
            })
            $("#fanxuan").click(function(){
                $("#ck")[0].checked=false;
                var ckk=$("input[name='kk']");
                for (var i=0;i<ckk.length;i++) {
                    ckk[i].checked=false;
                }
            })
            var citi=new Array(2);
            citi[0]=new Array("海淀","大兴");
            citi[1]=new Array("郑州","洛阳");
            $("#pro").change(function(){
                $("#city").empty();
                var a=this.value;
                for (var i=0;i<citi.length;i++) {
                    if (a==i) {
                        for (var j=0;j<citi[i].length;j++) {
                            $("#city").append("<option>"+citi[i][j]+"</option>")
                        }
                    }
                }
            })
        })
    </script>
        </script>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box{
                width: 800px;  
                height: 500px;  
                margin: 20px auto;  
                padding: 10px;
            }
            table tr th{
                width: 150px;
                background: antiquewhite;
            }
            table tr:nth-child(n) td{
                background-color:  aqua;
            }
            table tr:nth-child(2n) td{
                background-color:  chocolate;
            }
            
        </style>
    </head>
    <body>
        <div class="box">
        姓名:<input type="text" id="name" /><br /><br />
        性别:<select id="sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select><br /><br />
        爱好:<input type="checkbox" name="like" value="唱歌"/>唱歌<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name=" like" value="睡觉"/>睡觉<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="like" value="游戏"/>游戏<br /><br />
        籍贯:<select id="pro">
            <option value="0">北京</option>
            <option value="1">河南</option>
        </select>
        <select id="city">
            <option >海淀</option>
            <option >大兴</option>
        </select><br /><br /><br />
        <input type="button" id="insert" value="注册" style="margin-left:100px;background: yellow;border-radius: 5px;"/><br /><br />
         <br /><br /><table border="1" cellspacing="0" cellpadding="1" id="tab">
            <tr>
                <th><input type="checkbox" id="ck" /></th>
                <th>姓名</th>
                <th>性别</th>
                <th>爱好</th>
                <th>籍贯</th>
                <th>操作</th>
            </tr>
            
        </table>
        <br /><br />
        <input type="button" id="quanxuan" value="全选" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
        <input type="button" id="fanxuan" value="反选" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
        <input type="button" id="delete" value="批量删除" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
    </div>
    </body>
    
</html>

奥特曼不吃小怪兽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
混合开发搭建教程
02-24
cordova，混合开发，IOS 和Android 开发的混合，主要包括Cordova的搭建和第一个demo案例很实在的项目
混合开发案例01
pizifusheng的博客
05-02 143
//二级联动&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;&lt;/title&gt;  &lt;script type="text/javascript" src="js/angular.min.js" &am
混合开发案例02
pizifusheng的博客
05-02 210
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user
hhkfzhoukao2
Androidoux98的博客
04-02 194
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js类库/jquery-1.11.0.min.js"&gt; &lt;/script&a
150 混合推荐系统案例（项目开发）
阿甘兄
08-13 684
整体架构 1）数据平台： 在数据平台上，针对每个用户计算好三个推荐结果，基于用户的推荐结果、基于物品的推荐结果、基于内容的推荐结果。基于物品的相似度、基于内容的相似度。 2）Redis数据缓存： 通过独立的Java应用将每个用户的推荐结果和基于物品的相似度与基于内容的相似度信息导入到Redis缓存集群中。 3）获取推荐结果： 推荐结果有两种：一种是已经计算好的离线推荐结果，直接获取即可，另一种是...
Flutter混合开发详解
08-25
Flutter 混合开发详解 在本文中，我们将详细介绍 Flutter 混合开发的概念、原理和实现方法。Flutter 混合开发是一种混合开发模式，它可以将 Flutter 工程嵌入到原生 App 中，以提高移动终端的开发效率。 一、混合...
谈谈AndroidApp混合开发
02-01
混合开发的App（HybridApp）就是在一个App中内嵌一个轻量级的浏览器，一部分原生的功能改为Html5来开发，这部分功能不仅能够在不升级App的情况下动态更新，而且可以在Android或iOS的App上同时运行，让用户的体验更好...
安卓混合开发
03-14
混合开发模式通常使用HTML5、CSS3和JavaScript等Web技术来构建应用程序的界面部分，然后通过框架如React Native、Cordova或Ionic将这些Web组件嵌入到原生Android应用中，从而实现与设备硬件的深度交互。 在安卓混合...
hybrid混合开发
11-28
什么是混合开发，混合开发中weex,react native ,ionic 的个性
HTML5移动端混合应用开发项目案例实战视频
04-09
课程介绍：课程包含Canvas、video视频案例、swiper案例、混合开发结合MUI框架等结合讲解。
混合开发基础
欣欣博客
12-20 2489
1.混合开发的解决方案 方案一：dcloud(hbuilder)国内一款通用的框架，性能比phonegap高 方案二：phonegap（Adobe公司所出的将phonegap捐献给了Apache）,cordova最经典的一款混合开发的框架 方案三：APICloud 编写都是在本地 打包在云端 方案四：react native 国外比较火 方案五：WEX5 方案六：微信里面做混合开发 2.混合开发原理
Android+H5混合开发
热门推荐
Master_Miku的博客
02-07 1万+
开发之前 大约从去年开始吧, 也可能是前年 Html5好像火得不得了, 不得了...总能从网上听说到 XXX混合开发, 为了紧跟潮流(虽然有点儿晚了), 咱们也看看Android+Html5混合开发是怎样的! 今天带来的案例是微信的朋友圈, 因为我觉得是微信把H5给"捧红了". 不过丑话说在前头, 咱们的仿朋友圈可是"低仿", 只是把混合开发的大致流程说说, 界面可能不堪入目...见谅
WEB开发者之混合开发APP（八）， 商城案例--商城首页(shop.html)
KnuthZ的博客
06-28 2375
结合以前的知识点，做一个商城App的几个页面。 开发工具：Hbuilder，前端框架：mui，类型：混合开发App. 1. 商城app效果图： 商城首页 商城分类页 商品详情页 商品兑换页 2. 代码部分 2.1 商城首页shop.html，部分代码说明： 页面布局： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;h...
最简单的混合开发教程资料汇总
weixin_30487201的博客
03-07 111
今天开会的时候，产品经理说了计划并且提出到时候要用混合式开发来写app,并且意味深长的看了我一眼，毕竟安卓ios开发需要针对不同的手机开发出一套以适配屏幕的代码，成本太大，我难掩眼中的无奈还是坚定的说了一声，虽然我只是一个前端，但是学习的路还很长，这是一次对我能力的考验和提高，何乐而不为。有一个习惯，在开发之前，先做好技...
Hybrid App混合开发实战
奥帕斯特李立理与鲤的博客
03-28 1561
Hybird App Hybrid 开发：JsBridge - Web 和客户端的桥 Hybrid开发中，web页面往往会跟native进行交互，而JSBridge就是web页面和native进行通信的桥梁，通过JSBridge可以实现web调用native的方法，native可以通过webview.loadUrl之类的方法，将javascript:xxx代码放在页面执行，这有点类似在浏览器地...
Android原生与H5混合开发小例子
qq_31278925的博客
04-20 1745
Android原生与H5混合开发实例
安卓混合开发实例——JS与Java的交互
LeBang的博客
10-18 4421
今天说说安卓混合开发。 曾经有一个话题是web终会一统app，然后我们看到随着时间的推移。web越来越强大（H5啊，JS各种框架啊），但同时原生app也在不断发展。 或许在将来还会再有这种话题论战，但目前，混合开发，结合web和原生app二者各自的优势，已经是众望所归了。其中最常见的一种方式，在安卓的webview中嵌套web，通过各类设计，让二者进行交互。使得用户体验上几乎无法分辨出究竟是否纯
android web混合开发 混合开发实例——JS与Java的交互
一名屌丝程序员的秘密花园
06-22 2926
今天说说安卓混合开发。  曾经有一个话题是web终会一统app，然后我们看到随着时间的推移。web越来越强大（H5啊，js各种框架啊），但同时原生app也在不断发展。  或许在将来还会再有这种话题论战，但目前，混合开发，结合web和原生app二者各自的优势，已经是众望所归了。 其中最常见的一种方式，在安卓的webview中嵌套web，通过各类设计，让二者进行交互。使得用户体验上几乎无法分
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
最新发布
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
winform 混合开发
07-27
WinForm混合开发是指在Windows平台上使用WinForm开发桌面应用程序时，与其他技术或框架进行集成或混合使用。这样可以充分利用不同技术的优势，实现更丰富的功能和更好的用户体验。 在WinForm混合开发中，常见的技术...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值