點擊添加按鈕,使用ajax動態添加一行和移除一行,並且序號重新排序和數據不重復操作判斷

　　　　<div class="control-group " style="top: -20px;position: relative;">
            <label class="control-label">
                <g:message code="終端編號" />：
                <g:select optionKey="id" class="icon-resize-full terNo" optionValue="terNo"
                          from="${com.cnpay.entity.HandTerminal.executeQuery('from HandTerminal where status = 0 order by version asc')}"
                          name="terNo"  noSelection="['':'請選擇']">
                </g:select>
                <span class="color terNoMsg"></span>
                <input type="button" class="btn btn-success btn-mini btn-add" value="添加一行"/>
            </label>
        </div>

        <div class="control-group " style="top: -20px;position: relative;">
            <table class='table table-bordered table-striped table-condensed' style='margin-bottom:0;'>
                <thead>
                    <th><div class='text-center'>序號</div></th>

                    <th><div class='text-center'>終端編號</div></th>

                    <th><div class='text-center'>所屬牧場</div></th>

                    <th><div class='text-center'>操作</div></th>
                </thead>

                <tbody id="tbody">

                </tbody>
            </table>
        </div>

/**
 *添加一行
 */
$(".btn-add").click(function() {
    /**
     *獲取select下拉列表的value值
     * @type {*|jQuery}
     */
    var id = $(".terNo").children("option:selected").val();

    var hasRepeatValue = false;
    $("#tbody").find("tr").each(function() {
        var trid = $(this).attr("id");
        if (id == trid) {
            //如果tr的id已經存在就返回一個true就不讓再添加相同的數據
            hasRepeatValue = true;
        }
    });

    /**
     *@ ajax 添加行
     */
    if (!hasRepeatValue) {
        $.ajax({
            url: "selectFarmName",
            type: "post",
            dataType: "json",
            data: {
                "id": id
            },
            success: function(data) {
                if (data.success) {
                    /**
                     * 上面已經判斷了 如果我添加一行把我select value值帶到后台
                     * 再把id返回給tr
                     * 如果我已經有了這個tr 就不會執行我的這里的ajax
                     * @type {string}
                     */
                    var tr = "<tr id=" + data.id + ">";
                    tr += "<td><input type='hidden' class='handTID' value='" + data.id + "'/>";
                    tr += "<div class='text-center' id='No'></div></td>";
                    tr += "<td><div class='text-center'>" + data.terNo + "</div></td>";
                    tr += "<td><div class='text-center'>" + data.farmName + "</div></td>";
                    tr += "<td><div class='text-center'><button type='button' class='btn btn-danger btn-mini btn-remove'>刪除</button></div></td>";
                    tr += "</tr>";
                    $("#tbody").append(tr);
                    /**
                     *@ 記住 js是從上往下執行的要生成行tr
                     *  然后循環每一行 拿到每行的第一個列td
                     *  把序號賦值給第一個td的子元素id為No的div
                     */
                    $("#tbody").find("tr").each(function(i) {
                        $(this).find("td:first").children("div#No").html(i + 1);
                    });

                }
            },
            error: function() {
                alert("系統異常，請稍后重試！");
            }
        });
    } else {
        $("#add").modal('hide') $("#tips").modal('show');

    }
});

/**
 *@ 刪除一行 這個刪除按鈕是ajax里面生成的按鈕
 * 刪除一行 就把每行的第一個td子元素
 * id為No的div序號自動重新排序
 */
$("#tbody").delegate("button.btn-remove", "click",
function() {
    $(this).closest("tr").remove();
    $("#tbody").find("tr").each(function(i) {
        $(this).find("td:first").children("div#No").html(i + 1);
    });
});

另外我再帶上我每一行的數據怎么用ajax帶到后台

$("#btnSave").click(function() {
    var obj = {}; //聲明一個對象
    /**
     * 我這里是個例子 是把一行的數據放到json里帶到后台
     * 一行數據 所以我就寫了id 獲取id的值放到obj這個對象里
     * 如果你有多行數據  你就取class的值
     * 因為class是可重復的 id是不可重復的
     * 例: obj.jobName=$(this).find(".jobName").val();
     */
    obj.operatorName = $("#operatorName").val();
    obj.jobName = $("#jobName").val();
    obj.username = $("#username").val();
    obj.password = $("#password").val();
    obj.hand = [];
    var objc = {}
    $("#tbody").find(".handTID").each(function() {
        objc.hid = $(this).val();
        obj.hand.push(objc.hid);
    });

    $.ajax({
        url: 'saveOne',
        type: 'post',
        data: {
            "json": JSON.stringify(obj)
        },
        success: function(data) {
            if (data.success) {
                window.location = '${createLink(controller: 'systemUser ', action: 'indexs ')}';
            } else {
                alert("保存異常！");
            }
        },
        error: function() {
            alert("系統異常，請稍后重試！");
        }
    });
});

 

 

 

 

 

ssss