首页 > 其他 > 详细

JQ实现动态添加多行

时间:2020-04-11 12:32:26      阅读:121      评论:0      收藏:0      [点我收藏+]
一.实例

技术分享图片

 

二.Html代码

<div class="form-group SameCity">
  <label class="col-sm-2 control-label" style="margin-top: 0.5em"></label>
    <div class="col-sm-10">
      <div id="addTimeItems_Basics" class="btn btn-primary" style="height: auto; margin-top: 20px;">
      添加一行
      </div>
    <div class="form-horizontal" id="GiveTimeGroup_Basics">
    </div>

  </div>
</div>

 

三.JQ代码

1.添加行

$("#addTimeItems_Basics").on("click", function () {
  var len = $("#GiveTimeGroup_Basics").find("div[id^=‘role_‘]").length;
  $("#GiveTimeGroup_Basics").append(‘<div id="role_(‘ + (len + 1) + ‘)" class="form-inline bg-info"style="width:100%;margin:0 auto; padding:10px 0px; padding-left: 20px;"><input       type="text"class="Basics_Star form-control "style="width: 100px;"autocomplete="off" onkeyup="javascript:clearNoNum(this)"/>~<input type="text"class="Basics_End form-control "style="width: 100px;"autocomplete="off" onkeyup="javascript:clearNoNum(this)" />元&nbsp;&nbsp;赔付<input type="text"class="Basics_Price form-control "style="width: 100px;"autocomplete="off"  onkeyup="javascript:clearNoNum(this)"/>元<div class="btn btn-danger btn-sm btn-icon removeGiveTime_Basics"style="margin-left: 15px;"><b class="glyphicon glyphicon-minus pull-right"></b></div></div>‘);

})

2.删除行

$(document).on("click", ".removeGiveTime_Basics", function () {
  var obj = $(this).parent();
  var index = layer.confirm(‘你确定要删除此条配置么?‘, {
    btn: [‘确认‘, ‘取消‘] //按钮
  }, function () {
    layer.close(index);
    obj.remove();
  });
 })

3.组织json保存

function GroupJson_Basics() {
  var items = "";
  $("#GiveTimeGroup_Basics").find(".form-inline").each(function () {
    var Low = $(this).find(".Basics_Star").val().length > 0 ? $(this).find(".Basics_Star").val() : "0";
    var High = $(this).find(".Basics_End").val().length > 0 ? $(this).find(".Basics_End").val() : "0";
    var price = $(this).find(".Basics_Price").val().length > 0 ? $(this).find(".Basics_Price").val() : "0";
    if (items.length > 0) {
    items += ",";
    }
    items += ‘{"low":"‘ + Low + ‘","high":"‘ + High + ‘","price":"‘ + price + ‘"}‘;
  })
  var json = ‘{"role_ct":"‘ + $("#GiveTimeGroup_Basics").find("div[id^=‘role_‘]").length + ‘","roles":[‘ + items + ‘]}‘;
  $("#H_Basics").val(json);
}

 

JQ实现动态添加多行

原文:https://www.cnblogs.com/dsjbk/p/12678428.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!