Jquery动态添加 删除 操作实现

这是gridView为空数据时显示的表头

下面直接填代码:

 function Add() {
          //动态添加行
        $("#gridCustomerView").append("<tr class='rowdel' align='center'>"
                                + "<td style='width:80px'>" + $("#txtCpname").val() + "</td>"
                                + "<td style='width:90px'>" + $("#txtCpname").val() + "</td>"
                                + "<td style='width:80px'>" + $("#txtCPS").val() + "</td>"
                                + "<td style='width:60px'>" + $("#txtPhone").val() + "</td>"
                                + "<td style='width:80px'>" + $("#txtFax").val() + "</td>"
                                + "<td style='width:90px'>" + $("#txtAddress1").val() + "</td>"
                                + "<td style='width:90px'>" + $("#txtAddress2").val() + "</td>"
                                + "<td style='width:50px'>" + $("#txtAddress3").val() + "</td>"
                                + "<td style='width:50px'>" + $("#txtRemarle").val() + "</td>"
                                + "<td style='width:80px'> <a href=\'#\' onclick=\'deltr'>修改</a> <a href=\'#\' onclick=\'JsDelete(this)\'>删除</a></td>"    
                                + "</tr>");
    }

  function JsDelete(obj) {
        if (confirm('确定删除')) {
            delIndex(obj);
        }
        
    }
    function delIndex(obj) {
        //var rowIndex = obj.parentNode.parentNode.rowIndex; //获得行下标
        //$(obj).parent("td").parent("tr").css("background", "yellow");//背景颜色
        $(obj).parent("td").parent("tr").css("background", "yellow").remove();//删除当前行
    }

  上一下效果图:

posted @ 2013-08-20 09:36  KyrieYang  阅读(2910)  评论(0)    收藏  举报