jquery动态添加删除选项

8a9407bd-2c66-465b-9f0f-b23d96fcd2e5

 

如图,代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<div class="fieldset-wrapper form-inline advanced-tier-price-edit">
<div class="fieldset-wrapper-title">
**
<span><?= /* @escapeNotVerified */ __('Tier Price') ?></span>
**
</div>
<div class="fieldset-wrapper-content">
<div class="admin__field _required">
<div class="admin__field-control" data-role="grid-wrapper" data-index="tier_price">
<div class="admin__control-table-wrapper">
<table class="admin__dynamic-rows admin__control-table" data-role="grid" data-index="tier_price">
<thead>
<tr>
<th data-repeat-index="0"><?php echo __('Website')?></th>
<th data-repeat-index="1"><?php echo __('Customer Group')?></th>
<th data-repeat-index="2"><?php echo __('Quantity')?></th>
<th data-repeat-index="3"><?php echo __('Price / Discount')?></th>
<th data-repeat-index="4"><?php echo __('Price / Discount Type')?></th>
<th data-repeat-index="5"></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<button type="button" data-action="tier_price_add_new_row">
<span><?php echo __('Add')?></span>
</button>
</td>
</tr>
</tfoot>
</table>
<label class="addafter" for="name">
<span class="attribute-change-checkbox">
<input type="checkbox" id="toggle_tier_price" name="toggle_tier_price" class="checkbox" aria-required="true">
<label class="label" for="toggle_tier_price">
<?php echo __('Change')?>
</label>
</span>
</label>
</div>
</div>
</div>
</div>
</div>

<script>
require(['jquery'], function($){
var currentIndex = 0;
addTierPriceRow = function(){
var template = '<tr class="data-row" data-type="template">\
<td>\
<div class="admin__field" data-index="website_id">\
<div class="admin__field-control">\
<select class="admin__control-select" name="tier_price[{ {current_index}}][website_id]">\
<option data-title="All Websites" value="0">All Websites</option>\
</select>\
</div>\
</div>\
</td>\
<td>\
<div class="admin__field" data-index="cust_group">\
<div class="admin__field-control">\
<select class="admin__control-select" name="tier_price[{ {current_index}}][cust_group]">\
<option data-title="ALL GROUPS" value="32000">ALL GROUPS</option>\
<option data-title="NOT LOGGED IN" value="0">NOT LOGGED IN</option>\
<option data-title="General" value="1">General</option>\
<option data-title="Wholesale" value="2">Wholesale</option>\
<option data-title="Retailer" value="3">Retailer</option>\
</select>\
</div>\
</div>\
</td>\
<td>\
<div class="admin__field" data-index="price_qty">\
<div class="admin__field-control">\
<input class="admin__control-text" name="tier_price[{ {current_index}}][price_qty]" placeholder="" type="text">\
</div>\
</div>\
</td>\
<td>\
<div class="admin__field" data-index="price">\
<div class="admin__field-control">\
<input class="admin__control-text" name="tier_price[{ {current_index}}][price]" placeholder="" type="text">\
</div>\
</div>\
</td>\
<td>\
<div class="admin__field" data-index="price_type">\
<div class="admin__field-control">\
<select class="admin__control-select" name="tier_price[{ {current_index}}][price_type]">\
<option data-title="Fixed Price" value="fixed_price">Fixed Price</option>\
<option data-title="Percent Discount" value="percent_discount">Percent Discount</option>\
<option data-title="Fixed Discount" value="fixed_discount">Fixed Discount</option>\
</select>\
</div>\
</div>\
</td>\
<td>\
<button class="action-delete" data-action="tier_price_remove_row">\
<span></span>\
</button>\
</td>\
</tr>';

var indexedTempalte = template.replace(new RegExp('{ {current_index}}', 'g'), currentIndex)
var templateElement = $(indexedTempalte);

$('table[data-index="tier_price"] tbody').append(templateElement);
currentIndex++;
}

$(document).on('click', 'button[data-action="tier_price_remove_row"]', function(){
$(this).closest('tr').remove();
});
$('button[data-action="tier_price_add_new_row"]').click(function(){
addTierPriceRow();
});
});
</script>

 

坚持原创技术分享,您的支持将鼓励我继续创作!