表格的行数添加以及减少

表格的行数添加以及减少

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一般进来都会先通过循环创建6行，之后再经过需求自行添加或减少

效果图见下图：

使用js来创建表格的行，先定义一个函数，然后将你需要添加行的样式，效果写好，再通过点击一行一行地添加，如果需要回填的数据条数大于表格里的行数，会自动添加不足的行数

功能代码见下：

    function addrow() {
                var ste = $("#tabdetail").find(".Operation");
                var numBer = ste.length+1;
                var str = '<tr class="Operation">'
                             + ' <td align="center">'
                                 + ' <span class="num"><input type="text" value="' + numBer + '" style="width:15px" class="inputs"></span>'
                                 + ' <span class="actionArea">'
                                     + ' <a href="javascript:;" onclick="removerow($(this))"  class="delLite"></a>'
                                     + ' <a href="javascript:;" onclick="addrow()" class="plusLite"></a>'
                                 + ' </span>'
                             + '</td>'
                             + '<td align="left" display="商品名称/规格">'
                                + ' <div class="choseGoodArea">'
                                    + ' <div class="fl" style="width: 160px;">'
                                    + '<input type="hidden" class="CommodityID">'
                                        + ' <input name="txbProductName" type="text" class="receiptsInputText TermOfValidity" >'
                                    + ' </div>'
                                    + ' <a href="javascript:;" onclick="selectproduct()" class="choseGoods">选择</a>'
                                + ' </div>'
                             + '</td>'
                            + ' <td align="left" display="商品编号">'
                                 + ' <input name="txbProductCode" type="text" class="receiptsInputText SerialNumber" style="text-align: center;background:0;border:0" disabled="disabled">'
                             + ' </td>'
                             + ' <td class="free" display="属性">'
                                 + ' <span class="spanProperty"></span>'
                             + ' </td>'
                             + ' <td align="center" display="数量">'
                                + '  <input name="txbCount" type="text" class="receiptsInputText Quantity" style="text-align: center;display:block;" onblur="TxtQuantity()">'
                             + ' </td>'
                             + ' <td display="单位">'
                                 + ' <span class="textIn5 spanUnitName Unit" style="display: block;"></span>'
                             + ' </td>'
                             + ' <td align="left" display="单价(元)">'
                                     + '<input name="txbPrice" type="text" class="receiptsInputText ReferenceStockPrice UnitPrice" style="display:block" onblur="TxtQuantity()">'
                             + ' </td>'
                             + ' <td align="left" display="金额(元)">'
                                 + ' <input name="txbAmt" type="text" class="receiptsInputText Money" style="text-align: center;background:0;border:0" disabled="disabled">'
                             + ' </td>'
                             + ' <td align="left" display="备注">'
                                 + ' <input name="txbRowRemark" type="text" class="receiptsInputText Remark" style="display:block">'
                             + ' </td>'
                         + '</tr>'
                $("#tabdetail").append(str);
            }

 

下面是减少表格行代码，在减少前先要获取表格的行数，是否大于1行以上，如果不是，则不能再减少操作，如果是，则可以减少

 function removerow(This) {
            var ste = $("#tabdetail").find(".Operation");
            var Num = ste.length;
            if (Num>1) {
                This.parent().parent().parent().remove();
                for (var i = 0; i < Num; i++) {
                    $("#tabdetail").find(".Operation").find(".inputs").eq(i).val(i + 1);
                }
            }
            else {
                layer.alert("最后一行不能删除！", { icon: 0, title: "提示" });
            }
            TxtQuantity();
        }