表格数据的新增

表格数据的新增

开发工具与关键技术：web
作者：熊琪
撰写时间：2019.06.27

表格的新增数据主要方便的就是可多条新增数据，首先看效果图：

点击添加行（Add line），对应添加一行数据，给按钮一个点击事件，然后拼接需要添加的标签，拼接的每一列都是与原本的第一列是一样的：

function Addrow() {
    var Count = $("#Mytable").find(".Atr").length;
    var Counts = Count + 1;
    var aa = '<tr class="Atr AtrOne" >' +
   ' <td><select class="yanse  form-control" id="yanse' + Counts + '" >' + ' </select>' + '</td>' +
' <td>'+
 '    <select class="chima form-control" id="chima' + Counts + '" >' + ' </select>' +
  '  </td>'+
   ' <td><input type="text" class="form-control bianma"   id="bianma' + Counts + '" value=" " /></td>' +
  '<td><input type="text" class="form-control tiaoma" id="tiaoma' + Counts + '" value="" /></td> ' +
    '   <td><input type="text" class=" form-control shangxian"  id="shangxian' + Counts + '"  value="" /></td> ' +
   '    <td><input type="text" class="form-control" name="Bemark"   id="xiaxian' + Counts + '" value="" /></td> ' +
' </tr>';
}

这里是有六列，前两列是下拉框的列后四列是输入框的列，声明一个参数去接需要的添加的列，
这里的Mytable是table的id,Count记录的是table中tr标签的长度，Atr只是给的class;对于怎么绑定具体的下拉框还得在绑定下拉框时在id或面拼接一个参数，这样就可以把所有添加的行中的下拉框都绑定数据，代码如下：

$.get("Sizequery", function (data) {
                    $.each(data, function (i) {
                        $("# yanse' " + Counts + "").append('<option value="' + data[i].id + '">' + data[i].text + '</option>');
                    });
                });

意思就是在id后拼接了一个数字始得所有的id都不相同，然后在绑定数据给下拉框，Sizequery是写在控制器的查询数据的方法。
保存表格中的代码也是同样的方法也是拼接，不过要用到for循环，思路就是在添加数据时是一列一列的添加，添加之前得获取每个输入框的值，普通获取时可用代码如下：

var SelectOne = $(".SelectOne").val();//颜色
                var MainatainCraf = $(".MainatainCraf").val();
                var MaintainMoney = $(".MaintainMoney").val(); 
                var ListMoney = $(".ListMoney").val();限 
            var Bemark = $(".Bemark").val();

对应在每列中加个类名，类名可以相同，id不可相同，所以这就是拼接id的原因了。
如图：

For循环的作用就是将页面上多条的数据对应的列一条条的获取它的值，因为在之前添加行的时候在id后面拼接了对应的数字所以应该在获取值的时候继续拼接长度，这样就会根据id获取到值。
最后用opst提交

$.post("UpdateCommodityDetail", { Dates: data, CommodityID: starIds }, 
function (returnJson) {
if (returnJson.State == true) {
                 $("#modCommodity").modal("hide");
            TbCommoditylist = layuiTable.reload('TbCommoditylist')//刷新table
           } layer.alert(returnJson.Text, { icon: 0, title: '提示' });