有时候我们常常要操作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());//把克隆行插入到当行后 }