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" />

  • 相关阅读:
    013.ES6 -对象字面量增强型写法
    012. ES6
    011. ES6 语法
    10. 9. Vue 计算属性的setter和getter 以及 计算属性的缓存讲解
    4. Spring MVC 数据响应方式
    3. SpringMVC 组件解析
    9. Vue 计算属性
    【洛谷 2984】给巧克力
    【洛谷 1821】捉迷藏 Hide and Seek
    【洛谷 1821】银牛派对Silver Cow Party
  • 原文地址:https://www.cnblogs.com/lzhdim/p/1383970.html
Copyright © 2011-2022 走看看