zoukankan      html  css  js  c++  java
  • jQuery的动态表格动态表单

    这个例子就是通过jquery对dom进行操作,达到动态的实现HTML变换的问题。

    动态表格动态表单中的Jquery代码

    <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
    <script language="javascript">
    $("#addjobline").css("cursor","pointer");
    $("#rmjobline").css("cursor","pointer");
    $("#addjobline").click( function() {
    jobline+=1;
    $("#jobline").val(jobline);
    var str="";
    str+='<tr id="jobline'+jobline+'">'
    str+='<td><input type="text" name="brq'+jobline+'"></td>'
    str+='<td><input type="text" name="erq'+jobline+'"></td>'
    str+='<td><input type="text" name="school'+jobline+'"></td>'
    str+='<td><input type="text" name="spe'+jobline+'"></td>'
    str+='</tr>';
    $("#job").append(str);
    } );
    $("#rmjobline").click( function() {
    $("#jobline"+jobline).remove();
    jobline-=1;
    $("#jobline").val(jobline);
    } );
    </script>

    jQuery的下面是动态表格动态表单中的HTML代码
    <script>var jobline=1;</script>
    <input type="hidden" name="jobline" id="jobline" value="1">
    <table width="462" border="0" cellspacing="3" cellpadding="0">
            <tr>
              <td width="88" class="td1">开始日期</td>
              <td width="88" class="td1">结束日期</td>
              <td width="117" class="td1">单位名称</td>
              <td width="115" class="td1">岗位名称</td>
            </tr>
           <tbody id="job">
            <tr id="jobline1">
              <td><input type="hidden" name="jid1"><input type="text" name="brq1" ></td>
              <td><input type="text" name="erq1"></td>
              <td><input type="text" name="school1"></td>
              <td><input type="text" name="spe1"></td>
            </tr>
           </tbody>
    </table>
    <img src="/images/member/03.jpg" id="addjobline" width="12" height="17" /> <img src="/images/member/04.jpg" id="rmjobline" width="12" height="17" />

  • 相关阅读:
    Gecko SDK (XULRunner SDK)最新版
    北京联通机顶盒-中兴B860A破解
    litepdf简单的PDF操作库
    BZOJ1925 [SDOI2010]地精部落
    BZOJ 最大公约数 (通俗易懂&效率高&欧拉函数)
    Tarjan无向图的割点和桥(割边)全网详解&算法笔记&通俗易懂
    最近公共祖先综合算法笔记
    严格次小生成树[BJWC2010]
    NOIP2016 Day1 T2 天天爱跑步(树上差分,LCA)
    树上差分算法笔记
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1383970.html
Copyright © 2011-2022 走看看