JQuery 动态增加删减行，并合并其中几行

一、需求

最近写了一个小项目，用到了动态增加、删减表格行，效果图如下

想要达到的效果是：针对不同的目标动态增加行，删除行，并合并前两列

二、实现

1、分区域

        首先将序号1，2，3所在行视作不同的tbody，增加动态ID值

tbody id="Datarow_@q"

        新增按钮也赋予动态ID值

<input type="button" class="add_Target_@q" value="新增" />

2、动态增加行

        根据动态按钮，实现动态增加行。 

var i = 1;
    $("input").click(function () {
        var classname = $(this).attr("class"); //获取当前class名
        if (classname.indexOf("add_Target_") >= 0) {   //查询当前点击动作是否触发正确的”新增“按钮
            var j = classname.replace("add_Target_", "");   //获取变量j
                i++;
                var rowTem = '<tr>'
                    + '<td>'
                    + '<input type="text" >'
                    + '</td>'
                    + '</tr>';

 $("#" + "Datarow_" + j).append(rowTem);    //在特定tbody下面增加行

3、增加行的同时，将第一列和第二列合并单元格

        第一列合并：（这里注意，合并时会多出一列，最后要删掉）

  var tds = $("#" + "Datarow_" + j).find('td');  //获取当前tbody的所有td
  var leng = $("#" + "Datarow_" + j).children("tr").length;    //获取当前tbody的所有行的数量
  tds[0].setAttribute("rowSpan", leng);   //第一列合并
  $("#" + "Datarow_" + j).find("tr").eq(leng -1).find("td").eq(0).remove();  //因为合并时会多加一列，要去掉

        第二列合并同理

4、删除当前行

        新增每一行的时候，最后都会增加一个删除按钮，点击删除当前所在行，删除按钮也实现动态按钮

<input type="button"  class="del_Target_' +j+i + '" value="删除"  onclick = "Deleterow(' + i + ',' + j + ')"/>

        点击触发事件Deleterow()

$("#dorm_mode_in .content tr").find("." + "del_Target_" + j + i).parent("td").parent("tr").remove();