在HTML上通过JQUERY添加删除动态列和行

前两天有这样一个需求，就是在一个已经生成了的TABLE界面上动态添加列，并且在添加的列下添加对应的行，这个因为以前没有做过，所以在网上使劲的找资料，才找到了一个类似相同的代码，最后自己整理了出来。

效果图如下所示：

新增前：

新增后：

使用的新增函数如下：

function do_Add(){

//新增表头列
        $("#tb tr th:last").after("<th class='tab_titl' width='10%'onclick='do_Del(this);'>动态列</th>");

//新增表行列
        $("#table tr").each(function(){
            $(this).find("td:last").after("<td style='width:10%'>动态列</td>");
        });
    }

因为我这里固定了表头，所以表头和表行用了2个TABLE。

删除函数如下：

function do_Del(line){

//获取选中列的位置
        var lineLocator =  $(line).prevAll().length + 1;

//获取选中列的名称
        alert($(line).text());

//删除表头列
        $(line).remove();
        $("#table tr").each(function(){

//删除表行列
            $(this).find("td:nth-child("+lineLocator+")").remove();
        });
    }