利用jquery动态添加和删除表格的一行，并且保存单行数据

开发时遇到一个需求：要求要在页面的表格可以添加和删除一行，并能填写对应的数据后保存这一行数据。

HTML代码

界面使用了freemarker框架，teams是后台传过来的list类型数据

<form action="" id="" method="post">
...
<table  id="addTable" >
    <tr class="first_tr">
        <th>姓名</th>
        <th>国籍</th>
        <th>单位</th>
        <th>职务</th>
        <th>专业、特长</th>
        <th>操作</th>
    </tr>
    <#list teams as item>
    <tr>
    <input type="hidden" id="id" value="${item.id!}"/>
        <td>${item.name!}</td>
        <td>${item.gj!}</td>
        <td>${item.dw!}</td>
        <td>${item.zw!}</td>
        <td>${item.zytc!}</td>
        <td><input type="button" onclick="delRow(this)" value="-删除"/></td>
    </tr>
    </#list>
</table>
<table>
    <tr>
        <td celspan="6">
            <input type="button" onclick="addRow()" value="+添加"/>
        </td>
    </tr>
</table>
...
</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

为了不提交表格模板，我把模板放在了form表单外面，并且样式设置为不可见

需要添加的表格模板:

<table  style="display: none" id="tbl" >
    <tr class="will80">
        <td><input type="text" id="name" name="name" /></td>
        <td><input type="text" id="gj"  name="gj" /></td>
        <td><input type="text" id="dw" name="dw" /></td>
        <td><input type="text" id="zw" name="zw" /></td>
        <td><input type="text" id="zytc" name="zytc"/></td>
        <td></td>
        //新增的表格中需要有保存和删除操作
        <td><input type="button" onclick="save(this)" value="保存"/><input type="button" onclick="delRow(this)" value="-删除"/></td>
    </tr>
</table>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

主要靠jquery代码，实现为#addTable添加最后一行 
原理就是获取id为“tbl”的一行复制添加到id为“addTable”的最后一行。 
保存这一行数据使用ajax。

jQuery代码

添加表格行

function addRow(){
     var targetTbody= $("#tbl tbody");
    //获取#tbl表格的最后一行
    var tr = targetTbody.children("tr:last");
    //复制到#addTable表格最后
    var tr2=$("#addTable tbody").children("tr:last");
    tr2.after(tr[0].outerHTML);
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

删除表格行

function delRow(obj){
    //获取当前对象的父元素，在其下寻找id为“id”的元素的值
    var id1=$(obj).parents("tr").find("#id").val();
    var res=confirm("确定要删除么？");
    if(res){
        //删除界面元素，当前行
        $(obj).parents("tr").remove();
    }
    //若有id就表示该数据是界面原本就有的，需要删除数据库数据
    //若无id表示为界面动态添加的，删除时只需要删除界面元素
    if(id1!=null){
        //ajax删除数据
        $.ajax({
            url : "suggestpage_delTeam.do",
            data : {"id":id1},
            type : "POST",
            success : function(data) {
                if (data == "true") {
                    alert("删除成功");
                } else {
                    alert(data);
                }
            }
        });
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

保存单行数据

function save(obj) {
    var param = {};
    //获取当前属性
    param.projectId="${proId}";
    param.name = $(obj).parents("tr").find("#name").val();
    param.gj = $(obj).parents("tr").find("#gj").val();
    param.dw =$(obj).parents("tr").find("#dw").val();
    param.zw = $(obj).parents("tr").find("#zw").val();
    param.zytc = $(obj).parents("tr").find("#zytc").val();
    //判空校验
    if(checkNull(obj)){
    //保存数据
    $.ajax({
            url : "suggestpage_savePeople.do",
            ontentType : "application/x-www-form-urlencoded; charset=UTF-8",
            data : param,
            type : "POST",
            success : function(data) {
                if (data == "true") {
                    alert("保存成功");
                    //跳转界面
                    window.location="part2.do?proId="+param.projectId;
                } else {
                    alert(data);
                }
            }
        });
    }
}
//判空校验
function checkNewNull(obj){
    var ok=true;
    //获取新增的input
    var newtr=$(obj).parents("tr").find("input");
    newtr.each(function(){
        if($(this).val()==""){
            alert("请将表单填写完整！");
            $(this).focus();
            ok=false;
            return false;
        }
    });
    return ok;
}