jQuery实现选择方法和保护信息方法

本文介绍: 这是jQuery的一些小功能，小功能、大作用！

最近呢！一直在学习jQuery语法，也没时间发布文章，现在学的差不多了，先跟大家分享下学习感受吧！JavaScript学过后，再学习jQuery语法，应该是简单的，但我总是容易把它们搞混，学起来很是难受！现在基本上能分清了，jQuery是基于JavaScript写的一个包，超级好用，能节省大量的代码！写起来的效率超级高，所以，想学好JavaScript的人，最好再进阶下，学习下jQuery语法，学好后，会有质的提升。

下面我就让大家看看现在用jQuery语法写写选择和保护信息有多简单吧！

<html>
<head>
    <title>Title</title>
    <script src="js/My97DatePicker/WdatePicker.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<center>
    <form action="ApplyServlet?m=searchApply" method="post">
        申请人:<input type="text" name="name" value="${name}">
        <input type="submit" value="搜索"/>
    <table  border="1" cellspacing="0">
          <thead>
          <tr>
              <td></td>
              <td>编号</td>
              <td>名称</td>
              <td>身份证号</td>
              <td>手机号</td>
              <td>报销金额</td>
              <td>申请报销时间</td>
              <td>申请状态</td>
              <td>备注</td>
              <td>报销类别</td>
              <td>操作</td>
          </tr>
          </thead>
          <tbody>
           <c:forEach  items="${applyList}" var="as">
                 <tr class="t">
                     <td>
                         <input type="checkbox" class="ck" value="${as.aid}"/>
                     </td>
                     <td>${as.aid}</td>
                     <td>${as.name}</td>
                     <td class="idcard">${as.idcrad}</td>
                     <td class="phone">${as.tel}</td>
                     <td class="bx">${as.amount}</td>
                     <td>${as.aoolydate}</td>
                     <td>
                         <c:if test="${as.status==1}">待审核</c:if>
                         <c:if test="${as.status==2}">通过</c:if>
                         <c:if test="${as.status==3}">驳回</c:if>
                     </td>
                     <td>${as.detail}</td>
                     <td>${as.cname}</td>
                     <td>
                         <c:if test="${as.status==1}">
                             <input  type="button"  value="通过"  οnclick="test1(${as.aid})"/>
                             <input  type="button"  value="驳回"  οnclick="test2(${as.aid})"/>
                         </c:if>
                     </td>
                 </tr>
           </c:forEach>
          </tbody>
        ${pageHelper.html}
    </table>
    </form>
    <input type="button" value="全选" οnclick="qx()"/>
    <input type="button" value="全不选" οnclick="qbx()"/>
    <input type="button" value="反选" οnclick="fx()"/>
    <input type="button" value="排序" οnclick="pxx()">
    <a href="apply_add.jsp"><input type="button" value="添加"></a><br>
    <input type="button" value="日志信息" οnclick="test3()"/>
    <script>
        //全选、全不选、反选
        function qx(){
            $(".ck").prop("checked",true);
        }
        function qbx(){
            $(".ck").prop("checked",false);
        }
        function fx(){
            $(".ck").each(function (){
                this.checked=!this.checked;
            })
        }
        $(".idcard").each(function (){
            let idcard=$(this).text();
            let idcard2=idcard.substring(0,6)+"########"+idcard.substring(14);
            $(this).text(idcard2);
        })
        $(".phone").each(function (){
            let phone1=$(this).text();
            let phone2=phone1.substring(0,4)+"####"+phone1.substring(8);
            $(this).text(phone2);
        })

</script>

因为我通过sql语法，把mysql里的数据直接输出到页面上，没有展示全，大家可以直接把内容写固定来进行练习。我给大家看看页面效果

看绿色的代码，通过$(“.ck”)，这个叫做class类选择器，可以获取到所有的复选框，由于有些人可能现在只学习前端，可以写成

$(".ck").each(function (){
    this.checked=true;
})

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章

发表回复 取消回复

发表回复取消回复