table动态添加tr和删除

原创 2018年04月17日 18:05:55

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


table动态添加、删除tr

在Web网页中动态为table添加或删除数据行是很常见的需求,实现这一效果有很多种方法,这里只介绍一种,不过在写这一解决方法的时候我感受到了熟练使用Jquery的重要性。...
  • xiaouncle
  • xiaouncle
  • 2017-05-21 10:58:48
  • 1589

jQuery为table表格动态添加或删除tr

jQuery动态添加或删除tr
  • u012724595
  • u012724595
  • 2017-09-05 16:48:35
  • 674

使用jquery动态往table添加tr

[html] view plain copy   table cellpadding=10 id="tabId" >           tr>            ...
  • chengwai26
  • chengwai26
  • 2016-08-11 15:09:21
  • 1408

js动态控制table的tr,td增加及删除

html:                                                                     序号                 ...
  • shaobingj126
  • shaobingj126
  • 2014-01-23 08:43:48
  • 9010

Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据

关于jquery实现动态添加table tr的问题我也不多说了 上面代码很多地方都有注释的  关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str...
  • qq_19524879
  • qq_19524879
  • 2014-09-30 11:55:27
  • 2854

jquery动态往table添加tr

增一年 var i = 0; $(function(){ $("#addYear").click(function(){ v...
  • lin062854
  • lin062854
  • 2014-03-25 16:35:44
  • 3030

JS动态添加tr元素

tr1: 是 否 ...
  • ch717828
  • ch717828
  • 2015-04-03 10:38:59
  • 3237

JS给Table动态添加 TR

function createRow(TableName, Row, trHtml) {var $tr = $("#" + TableName+ " tr").eq(Row);if ($tr.size...
  • chenpeng0118
  • chenpeng0118
  • 2015-03-27 16:36:57
  • 2331

JQUERY方法给TABLE动态增加 删除行

比如设置table的id为tab var trHTML = "..." $("#tab").append(trHTML);//在table最后面添加一行 $("#tab tr:eq(2)").afte...
  • xyr05288
  • xyr05288
  • 2015-06-08 16:20:31
  • 5037

js动态增加,删除td,tr,table,div

js实现的动态添加,删除table内容: 截图如下: 1.   2.   源代码: main.css body { background-image: url(../images/qiantai...
  • sxdtzhaoxinguo
  • sxdtzhaoxinguo
  • 2014-01-26 10:27:39
  • 7881
收藏助手
不良信息举报
您举报文章:table动态添加tr和删除
举报原因:
原因补充:

(最多只允许输入30个字)