jquery html 多行,JQ实现动态添加多行

一.实例

二.Html代码

添加一行

三.JQ代码

1.添加行

$("#addTimeItems_Basics").on("click", function () {

var len = $("#GiveTimeGroup_Basics").find("div[id^=‘role_‘]").length;

$("#GiveTimeGroup_Basics").append(‘

~元  赔付元

‘);

})

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);

}

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