table动态添加tr和删除

有时候我们常常要操作table去添加一行或删除一行.table代码如下,我们需要在点增加商品的时候在当前行的下面插入一行,数据和当行类似.点击删除的时候删除当前行.

<table>
<tr>
@Html.Hidden("GoodsQuestionManageId", @entity.GoodsQuestionManageId)
@Html.Hidden("GoodsId", @entity.GoodsId)
<td name="Sku" sku="@entity.Sku">@entity.Sku</td>
<td name="OrderNumber">@entity.OrderNumber</td>
<td name="GoodsName">@entity.GoodsName</td>
<td name="GoodsQuantity" class="text-right">@entity.GoodsQuantity</td>
<td class="text-right">@Html.TextBox("QuestionQuantity", @entity.QuestionQuantity, new { @class = "form-control input-sm Amount", style = "text-align:right;", onblur = "validNumBlur(this);", oninput = "validNumKeyup(this);", onpropertychange = "validNumKeyup(this);" })</td>
<td>@Html.DropDownList("GoodsQuestionTypeId", typeData, new { @class = "form-control input-sm" })</td>
<td>@Html.TextArea("Remarks", @entity.Remarks, new { @class = "form-control input-sm", style = "resize: none;", rows = "1" })</td>
<td class="text-center">
<button type="button" class="btn btn-info waves-light m-b-5 btn-xs" style="margin-top:3px;" title="增加同商品" index="0" onclick="trAdd(this);">
    <i class="md md-add"></i>
</button>
<button type="button" class="btn btn-danger waves-light m-b-5 btn-xs" style="margin-top:3px;" title="删除" index="0" onclick="trDel(this);">
    <i class="md md-delete"></i>
</button>
</td>
</tr>
</table>

删除行代码

        function trDel(btn) {
            $(btn).parent().parent();
        }

添加行代码

1.克隆行

        //添加按钮复制行事件
        function trAdd(btn) {
            var $btn = $(btn);
            var newTr = $btn.parent().parent().clone();

            //克隆行内容初始化
            newTr.find('#GoodsQuestionManageId').val('0');
            newTr.find('#QuestionQuantity').val('');
            newTr.find('#GoodsQuestionTypeId').val('0');
            newTr.find('#Remarks').val('');

            newTr.insertAfter($btn.parent().parent());//把克隆行插入到当行后
        }

2.动态创建标签

//添加按钮复制行事件
        function trAdd(btn) {
            var $btn = $(btn);
            var oldTr = $btn.parent().parent();
            var newTr = $('<tr>');
            var newTd;
            var temp;
            newTd = $('<input type="hidden" id="GoodsQuestionManageId" name="GoodsQuestionManageId" value=0>');
            newTr.append(newTd);

            temp = oldTr.find('#GoodsId').val();
            newTd = $('<input type="hidden" id="GoodsId" name="GoodsId" value=' + temp + '>');
            newTr.append(newTd);
            temp = oldTr.find('td[name="Sku"]').text();
            newTd = $('<td name="Sku" sku="'+temp+'">'+temp+'</td>');
            newTr.append(newTd);
             .........
            newTd = $('<td class="text-center">'
        +'<button type="button" class="btn btn-info waves-light m-b-5 btn-xs" style="margin-top:3px;" title="增加同商品" index="0" onclick="trAdd(this);">'
        +'<i class="md md-add"></i></button>'
        +'<button type="button" class="btn btn-danger waves-light m-b-5 btn-xs" style="margin-top:3px;" title="删除" index="0" onclick="trDel(this);">'
        + '<i class="md md-delete"></i></button></td>');
            newTr.append(newTd);
            newTr.insertAfter($btn.parent().parent());//把克隆行插入到当行后
        }