【数据批处理1】动态增删表单节点          返回主页

本文主要讲解数据批量提交的前台部分。

主要使用了Jquery的DOM操作，实现单元的增加与删除，并配合隐藏表单域获取节点数量。

将节点数量及单元中的参数批量提交到后台。

后台获取这些数据，开启批处理达到数据的批量提交

前台页面

        <form action="batch.do" method="post">
            <!-- 前台动态渲染 -->
            <!-- 隐藏表单域保存条目的数量 -->
            <input type="hidden" name="hidden" value="" class="hidden"/>
            <table border="1" id="table1">
                <tr id="l_title">
                    <td>昵称</td>
                    <td>密码</td>
                    <td>操作</td>
                </tr>
                <tr class="datalist">
                    <td><input type="text" name="name" /></td>
                    <td><input type="text" name="passwd" /></td>
                    <td><a href="#" class="add">添加</a>
                    <a href="#" class="del">移除</a></td>
                </tr>
            </table>
            <br/>
            <center><input type="submit" value="提交" /></center>
            </form>

js代码

        var i = 1;
        $(document).ready(function() {
                //这种写法可以删除任意行，并可以为新增行自动绑定事件
                $("table").delegate(".deleleNode", "click", function() {
                    $(this).parent().parent().remove();
                    i--;
                    $(".hidden").val(i);
                });

                $(".add").click(function(){
                    var node = $("<tr class='datalist'>" + "<td>"
                            + "<input type='text' name='name'/>" + "</td>" + "<td>"
                            + "<input type='text' name='passwd'/>" + "</td>" + "<td>"
                            + "<a href='#' class='add'>添加</a>"
                            + "<a href='#' class='deleleNode'>移除</a>" + "</td>" + "</tr>");
                    $("table").append(node);
                    i++;
                    $(".hidden").val(i);
                });
            });

解释

1. 节点增加逻辑

   将单元通过append添加到table内部，同时将一个全局的计数器增1写入隐藏表单域的value属性

2. 节点删除逻辑

   将单元从父节点中删除，由于live在jquery高版本失效，此处使用delegate进行操作； 删除节点之后将计数器减一并写回隐藏表单域的value中

3. delegate用法

   语法
           $(selector).delegate(childSelector,event,data,function)
   
           返回值: jQuery delegate(selector,[type],[data],fn)
   
           概述
   
           指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
   
           参数
           selector,[type],fnString,String,Function V1.4.2
           selector:选择器字符串，用于过滤器触发事件的元素。
   
           type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
   
           fn:当事件发生时运行的函数
   
           selector,[type],[data],fnString,String,Object,Function V1.4.2
           selector:选择器字符串，用于过滤器触发事件的元素。
   
           type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
   
           data:传递到函数的额外数据
   
           fn:当事件发生时运行的函数
   
           selector,eventsString,String V1.4.3
           selector:选择器字符串，用于过滤器触发事件的元素。
   
           events:一个或多个事件类型的字符串和函数的数据映射来执行他们。