点击添加按钮,使用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