zoukankan      html  css  js  c++  java
  • JavaWeb--JQuery中的$(function())

    <%--
      Created by IntelliJ IDEA.
      User: Skye
      Date: 2017/12/21
      Time: 21:05
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript">
           $(function(){
    
                var i = 2;
    
                $("#addFile").click(function(){
                    $(this).parent().parent().before("<tr class='file'><td>File"
                        + i +"</td><td><input type='file' name='file"
                        + i + "'></td></tr>"
                        + "<tr class='desc'><td>Desc"
                        + i + "</td><td><input type='text' name='desc"
                        + i + "'><button id='delete"
                        + i + "'>删除</button></td></tr>");
                    i++;
    
                    //获取新添加的删除按钮
                    $("#delete" + (i - 1)).click(function(){
                        var $tr = $(this).parent().parent();
                        $tr.prev("tr").remove();
                        $tr.remove();
    
                        //对i进行重排序
                        $(".file").each(function(index){
                            var n = index + 1;
                            $(this).find("td:first").text("File" + n);
                            $(this).find("td:last input").attr("name", "file" + n);
                        });
    
                        $(".desc").each(function(index){
                            var n = index + 1;
                            $(this).find("td:first").text("Desc" + n);
                            $(this).find("td:last input").attr("name", "desc" + n);
                        });
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
    
    <font color="red">${message}</font>
    <br><br>
    <form action="/UploadServlet" method="post" enctype="multipart/form-data">
        <input type="hidden" id="fileNum" name="fileNum" value="1">
    
        <table>
            <tr class="file">
                <td>File1</td>
                <td><input type="file" name="file1"></td>
            </tr>
            <tr class="desc">
                <td>Desc1</td>
                <td><input type="text" name="desc1"></td>
            </tr>
            <tr>
                <td><input type="submit" id="submit" value="提交"></td>
                <td><button id="addFile">新增一个附件</button></td>
            </tr>
        </table>
    </form>
    </body>
    </html>
    

      

  • 相关阅读:
    block本质探寻五之atuto类型局部实例对象
    block本质探寻四之copy
    block本质探寻三之block类型
    Android Studio使用时遇见的一些问题+解决方法(持续更新)
    Android之练习MVVM+DataBinding框架模式
    解决 Mac Android Studio Gradle Sync 慢的问题
    Android之MVC、MVP、MVVM
    Android之同步与异步
    Android之Fragment
    Android之Fragment栈操作 commit()问题分析
  • 原文地址:https://www.cnblogs.com/SkyeAngel/p/8084937.html
Copyright © 2011-2022 走看看