jQuery动态添加Table行

效果图

js代码展示如下:

1、控制添加删除按钮图标的显示,最后一行显示添加按钮，其他行显示删除按钮

//初始化
function Init(){
      //获取最后一行的data-row(标识行)
    var rowIndex = $("#eFromTable tr:last").attr("data-row");
    if (rowIndex == "" || rowIndex == null) {
        rowIndex = parseInt(1);
    } else {
        rowIndex = parseInt(rowIndex);
    }

    //隐藏添加按钮
    $('.imgShow').addClass('imgHide');
    //最后一行显示增加按钮
    $('img[data-id=' + rowIndex + ']').removeClass('imgHide');

    //全部显示删除
    $('.rowDelete').removeClass('imgHide');
    //最后一行隐藏删除按钮
    $('img[data-row=' + rowIndex + ']').addClass('imgHide');
};

2、点击按钮操作

//点击按钮
function Click() {
    $('.rowAdd').click(function() {
        //添加一行数据
        CreateRow();
    });

    $('.rowDelete').click(function() {
        //获取table行
        //var rowCount = $("#eFromTable tr").length;
        var dataRow = $(this).attr('data-row');
        $('tr[data-row=' + dataRow + ']').remove();
    });
};

3、动态添加行数据

//添加行
function CreateRow() {
    //获取最后一行的data-id(标识行)
    var rowIndex = $("#eFromTable tr:last").attr("data-row");
    if (rowIndex == "" || rowIndex == null) {
        rowIndex = parseInt(1);
    } else {
        rowIndex = parseInt(rowIndex) + 1;
    }

    var htmlList = '<tr data-row=' + rowIndex + '>';
    //科室名称
    htmlList += '<td style="text-align:center"><select name="DEPART_NAME" class="combox">' + $('#unitList').html() + '</select></td>';
    //执行单位
    htmlList += '<td style="text-align:center"><input type="text" name="EXECUTION_UNIT"  size="6" maxlength="128" class="required" /></td>';
    //上缴时间
    //htmlList += '<td style="text-align:center">'+$('#turn_over_time').html()+'</td>';
    htmlList += '<td style="text-align:center"><input class="Wdate" type="text" onClick="WdatePicker()" size="10" class="required" /></td>';
    //htmlList += '<td style="text-align:center"><input type="text" name="TURN_OVER_TIME" class="date" format="yyyy-MM-dd" yearstart="-120" yearend="5" readonly="readonly" size="10" /></td>';
    //上缴类型
    htmlList += '<td style="text-align:center"><select name="TURN_OVER_TYPE" class="combox">' + $('#typeList').html() + '</select></td>';
    //上缴金额
    htmlList += '<td style="text-align:center"><input type="text" value="0" name="TURN_OVER_MONEY" size="6" maxlength="128" class="required" /></td>';
    //支出比例
    htmlList += '<td style="text-align:center"><input type="text" value="0" name="EXPEND_SCALE" size="6" maxlength="128" class="required" /></td>';
    //年初预算
    htmlList += '<td style="text-align:center"><input type="text" value="0" name="YEAR_BUDGET" size="6" maxlength="128" class="required" /></td>';
    //指标调剂
    htmlList += '<td style="text-align:center"><input type="text" value="0" name="INDEX_ADJUST" size="6" maxlength="128" class="required" /></td>';
    //款项
    htmlList += '<td style="text-align:center"><input type="text" value="0" name="PAYMENT" size="6" maxlength="128" class="required" /></td>';
    //备注
    htmlList += '<td style="text-align:center"><input type="text" name="REMARK" size="6" maxlength="128" /></td>';
    //操作
    htmlList += '<td style="text-align:center">';
    htmlList += '<img data-id=' + rowIndex + ' title="添加一行" class="rowAdd imgShow" alt="添加" src="/images/RowAdd.png" width="20" height="20">';
    htmlList += '<img data-id=' + rowIndex + ' data-row=' + rowIndex + ' alt="分割线" class="imgShow" src="/images/Line.png" width="5" height="20">';
    htmlList += '<img data-row=' + rowIndex + ' title="删除一行" class="rowDelete" alt="删除" src="/images/RowDelete.png" width="20" height="20">';
    htmlList += '</td></tr>';

    //在行最后添加数据
    $("#eFromTable tr:last").after(htmlList);

    htmlList = '';
    //初始化行
    Init();

    //点击添加数据
    Click();
};

4、加载select选中数据,可将后台获取的数据绑定在selelct的data-value属性上

//加载数据
function LoadDate()
{
    //绑定科室选中数据
    $("select.depart").each(function(){
        $(this).val($(this).attr("data-value"));
    });
    
    //绑定上缴类型选中数据
    $("select.type").each(function(){
        $(this).val($(this).attr("data-value"));
    });
};

5、jquery初始化代码

$(document).ready(function () {
    //获取table行(表头占4行)
    var rowCount = $("#eFromTable tr").length;
    if(rowCount==4){
        CreateRow();    
    }
    else{
        //初始化
        Init();
        
        //初始化点击
        Click();
        
        //绑定下拉列表数据
        LoadDate();
    }
});

6、遍历Table行，Ajax提交数据

//保存数据
function AddRows(){
     //总行数
    var rowCount = $("#eFromTable tr").length - 4;
    var row = 0;
    //循环遍历表格，添加数据    
    //tr:gt(3)选择前 4 个之后的所有 <tr> 元素：
    $("#eFromTable tr:gt(3)").each(function(i) {
        //部门名称
        //var depart = $(this).children("td:eq(0)").find("option:selected").text();
        var depart = $(this).children("td:eq(0)").find("select").val();
        //执行单位
        var unit = $(this).children("td:eq(1)").find("input").val();
        //上缴时间
        var time = $(this).children("td:eq(2)").find("input").val();
        //上缴类型
        var type = $(this).children("td:eq(3)").find("select").val();
        //上缴金额
        var money = $(this).children("td:eq(4)").find("input").val();
        //支出比例
        var scale = $(this).children("td:eq(5)").find("input").val();
        //年初预算
        var budget = $(this).children("td:eq(6)").find("input").val();
        //指标调剂
        var index = $(this).children("td:eq(7)").find("input").val();
        //款项
        var payment = $(this).children("td:eq(8)").find("input").val();
        //备注
        var remark = $(this).children("td:eq(9)").find("input").val();

        //提交保存数据
        $.ajax({
            type: "POST",
            url: "/jsp/module/report/submitDate.jsp",
            //需要异步执行
            async: false,
            data: {
                //传汉字参数需要utf编码
                "Depart": encodeURI(depart),
                "Unit": encodeURI(unit),
                "Time": time,
                "Type": encodeURI(type),
                "Money": money,
                "Scale": scale,
                "Budget": budget,
                "Index": index,
                "Payment": payment,
                "Remark": encodeURI(remark),
                "Row": row
            },
            dataType: "json",
            success: function(data) {
                if (data.result == "1") {
                    row++;
                }
            },
            error: function(XMLResponse) {
                alert(XMLResponse.responseText);
            }
        })
    })
    
    //相等全部添加
    if (row = rowCount) {
        alertMsg.info("表格数据添加成功...");
        //保存按钮不启用
        $("#btnSave").attr("disabled", true); 
    }
}

7、 ajax数据处理的jsp页面

<%@page import="sun.reflect.ReflectionFactory.GetReflectionFactoryAction"%>
<%@page import="com.sun.xml.internal.ws.message.source.PayloadSourceMessage"%>

<%@page import="java.io.PrintWriter" %>
<%@page import="java.net.URLEncoder" %>
<%@page import="com.sinosoft.dao.DBTool"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="com.sinosoft.dao.DBAccess"%>
<%@page import="com.sinosoft.module.archives.common.JBaseSymbol"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//科室名称
String depart=java.net.URLDecoder.decode(request.getParameter("Depart"), "UTF-8");
//执行单位
String unit =java.net.URLDecoder.decode(request.getParameter("Unit"), "UTF-8");
unit = java.net.URLDecoder.decode(unit, "UTF-8");
//上缴时间
String time = request.getParameter("Time");
//上缴类型
String type=java.net.URLDecoder.decode(request.getParameter("Type"), "UTF-8");
//上缴金额
String money = request.getParameter("Money");
//支出比例
String scale = request.getParameter("Scale");
//年初预算
String budget = request.getParameter("Budget");
//指标调剂
String index = request.getParameter("Index");
//款项
String payment = request.getParameter("Payment");
//备注
String remark = java.net.URLDecoder.decode(request.getParameter("Remark"), "UTF-8");
remark = java.net.URLDecoder.decode(remark, "UTF-8");
//备注
int row =java.lang.Integer.parseInt(request.getParameter("Row"));

//插入前清空所有数据
StringBuffer strSqlDel = new StringBuffer();
strSqlDel.append("DELETE FROM NO_TAX_INCOME ");

//数据库插入Sql语句
StringBuffer strSql = new StringBuffer();
strSql.append("INSERT INTO NO_TAX_INCOME(ID,DEPART_NAME,EXECUTION_UNIT,TURN_OVER_TIME,TURN_OVER_TYPE,TURN_OVER_MONEY,");
strSql.append("EXPEND_SCALE,YEAR_BUDGET,INDEX_ADJUST,PAYMENT,REMARK ");
strSql.append(") VALUES( ");
strSql.append("sys_guid(),'"+depart+"','"+unit+"','"+time+"','"+type+"','"+money+"','"+scale+"','"+budget+"','"+index+"',");
strSql.append("'"+payment+"','"+remark+"'");
strSql.append(") ");

//执行插入语句
DBTool dbTool = DBAccess.getDBTool();
//执行删除语句(添加前删除一次)
if(row==0)
{
    Boolean isDelete= dbTool.executeSql(JBaseSymbol.dbSource, strSqlDel.toString());
}

Boolean isSuccess = dbTool.insertSql(JBaseSymbol.dbSource, strSql.toString());
String result = "0";
if(isSuccess)
{
    result = "1";
}
//返回json
String strJson = "{"result":""+result+""}";
//PrintWriter out=response.getWriter();
//out.print(strJson);

response.getWriter().print(strJson);
%>

jsp页面 table表头

 <table id="eFromTable" width="99%" border="0" cellspacing="0"
                   cellpadding="0">
                <tr>
                  <td colspan="11" style="text-align: right;">单位：万元</td>
                <tr>
                <tr>
                     <td rowspan="2" style="text-align:center">科室名称</td>
                    <td rowspan="2" style="text-align:center">执行单位</td>
                    <td colspan="3" style="text-align:center">收入上缴情况</td>
                    <td rowspan="2" style="text-align:center">支出比例</td>
                    <td colspan="2" style="text-align:center">支出安排</td>
                    <td rowspan="2" style="text-align:center">款项</td>
                    <td rowspan="2" style="text-align:center">备注</td>
                    <td rowspan="2" style="text-align:center">操作</td>
                </tr>
                <tr>
                    <td style="text-align:center">上缴时间</td>
                    <td style="text-align:center">上缴类型</td>
                    <td style="text-align:center">上缴金额</td>
                    <td style="text-align:center">年初预算</td>
                    <td style="text-align:center">指标调剂</td>
                </tr>