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>

フォームテンプレートをコミットしないように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>

主にjqueryコードにより、#addTableに最後の行を追加する原理は、idが「tbl」である1行のコピーを取得して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);
}

表行の削除

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行データの保存

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;
}