给表格动态添加一行，删除一行

1.html内容

<div class="Stock-automatic2-content">
<div>
        <table>
            <tr>
                <td style="width:16%;min-width: 112px">6922711079066</td>
                <td style="width:19%;min-width: 133px">广博 GBR0790 40页办公软抄记事本</td>
                <td style="width:19%;min-width: 133px">148*210mm（40页） 10本装</td>
                <td style="width:10%;min-width: 70px">本</td>
                <td style="width:10%;min-width: 70px">200</td>
                <td style="width:16%;min-width: 112px">
                    <div class="automatic-input2"><input type="text"/></div>
                </td>
                <td style="width:10%;min-width: 70px">
                    <div><a class="delRow" href="##">删除</a></div>
                </td>
             </tr>
        </table>
    </div>
</div>

 

2.Jquery部分代码

/*添加商品按钮 添加一条空的数据*/
$(".Addshop-choose").click(function(){
    var str='<tr>'+'<td style="width:16%;min-width: 112px"></td>'+'<td style="width:19%;min-width: 133px"></td>'+
        '<td style="width:19%;min-width: 133px"></td>'+'<td style="width:10%;min-width: 70px"></td>'+'<td style="width:10%;min-width: 70px"></td>'+
        '<td style="width:16%;min-width: 112px"> <div class="automatic-input2"><input type="text"/></div> </td>'+
        '<td style="width:10%;min-width: 70px"> <div><a href="###" class="delRow">删除</a></div>'
        +'</tr>';
    $(".Stock-automatic2-content table tbody").append(str);
    $(".Popup-content-Addshop").hide();
    $(".layer").hide();
});

解析： .Addshop-choose 表示的选择按钮的class名称； .Popup-content-Addshop 表示选择按钮弹出框的class名称；.layer 表示遮罩层  append用来拼接字符。

添加内容后，删除表格中一行（动态添加后的表格内容不能绑定事件。）

3.Jquery代码部分

 

$(".Stock-automatic2-content").delegate(".delRow","click",function(event){
    var $this = $(this);
    var target = event.target;
    var trNode = $(target).parentsUntil("tr")[1];
    $(trNode.parentNode).remove();
});