jQuery 动态操作表单数据

例如：需要操作如下图的一个表单，单击加号可新增一行，单击叉可以去掉一行，前台如果实现？

 

实现分为三部分

1.初始化数据.(可根据需求定义)

    $(function () {
            var vals = $("#hidVals").val();      //获取初始化的原始数据
            if (vals != "") {
                var aryVal = vals.split("|");
                $tempTr = $("#tb1 tr:eq(1)");
                $tempTr.find("select[name='postID']").val(aryVal[0].split(",")[0]);
                $tempTr.find("input[name='fAmount']").val(aryVal[0].split(",")[1]);
                for (var i = 1; i < aryVal.length; i++) {
                    addRow();
                    $tempTr = $("#tb1 tr:eq(" + (i+1) + ")");
                    $tempTr.find("select").val(aryVal[i].split(",")[0]);
                    $tempTr.find("input").val(aryVal[i].split(",")[1]);
                }
            }
        });

2.新增 一行

    function addRow() {
            $("#tb1 tr:eq(1)").clone(true)  //克隆
            .find("select option:eq(0)").attr('selected', 'selected').end()  //選擇默認
            .find("input").val('').end()  //設置文本框內容為空
            .find("img").remove().end()  //清楚 img 圖片
            .find("select").after(" <img src='../../Images/No.png' width='10' style='cursor:pointer;' height='10' onclick='delRow(this);' />").end()  //插入 img 圖片
            .appendTo($("#tb1"));  //新增 tr 到表格
        }

3.删除一行

    function delRow(obj) {
            var tr = $(obj).parent().parent(); //得到刪除 Tr
            if (confirm("確認刪除?")) {
                tr.remove();  //刪除
            }
        }

 

总结：Jquery 让复杂的功能变得简单，选择器的功能很强大，可以在项目中节省大量开发时间.