jQuery動態添加Table行

效果圖

js代碼展現以下:

一、控制添加刪除按鈕圖標的顯示,最後一行顯示添加按鈕，其餘行顯示刪除按鈕

//初始化
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');
};

View Code

二、點擊按鈕操做

//點擊按鈕
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();
    });
};

View Code

三、動態添加行數據

//添加行
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();
};

View Code

四、加載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"));
    });
};

View Code

五、jquery初始化代碼

$(document).ready(function () {
    //獲取table行(表頭佔4行)
    var rowCount = $("#eFromTable tr").length;
    if(rowCount==4){
        CreateRow();    
    }
    else{
        //初始化
        Init();
        
        //初始化點擊
        Click();
        
        //綁定下拉列表數據
        LoadDate();
    }
});

View Code

六、遍歷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); 
    }
}

View Code

七、 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);
%>

View Code

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>

View Code