table dynamically add tr and delete

Sometimes we often need to operate the table to add a row or delete a row. The table code is as follows, we need to insert a row below the current row when adding a product, the data is similar to the current row. Delete the current row when clicking delete.

<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>

delete line of code

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

add line of code

1. Clone the row

        //Add button copy row event
        function trAdd(btn) {
            var $ btn = $ (btn);
            var newTr = $btn.parent().parent().clone();

            //Initialize the contents of the cloned row
            newTr.find('#GoodsQuestionManageId').val('0');
            newTr.find('#QuestionQuantity').val('');
            newTr.find('#GoodsQuestionTypeId').val('0');
            newTr.find('#Remarks').val('');

            newTr.insertAfter($btn.parent().parent());//Insert the cloned row after the current row
        }

2. Dynamically create tags

//Add button copy row event
        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());//Insert the cloned row after the current row
        }