1. HTML section

<span style="font-size: 30px; color: #DBA901;" > products & have spent &nbsp; &nbsp; </span> <img src="./v1/img/ico_add.png" v-on:click="addProductDetail()" style="width: 50px;" >Copy the code

2, js part (global variable defined by VueObj. I)

addProDetail: function() { $html = $("<table id=table"+VueObj.i+">" +"<tr>" +"<td colspan='4'><img src='./v1/img/ico_del.png' style='width: 30px; float: right; margin-top: -20px; "Class =" img "+ VueObj i. +" > < / td > "+" < / tr > < tr > "+" "+" < td > name < input type = 'text' name = 'detail [" + VueObj i. + "] [name]' Class = 'form - 90' > < / td > "+" < td > < input type = 'text' name = 'detail [" + VueObj i. + "] [num]' class = 'form - 90' > < / td >" Brand + "< td > < input type = 'text' name = 'detail [" + VueObj i. +"] [brand]' class = 'form - 90' > < / td > "+" < td > size < input type = 'text' Name = 'detail [+ VueObj i. "+"]. [spec]' class = 'form - 90' > < / td > "+ '< / tr >' +" < tr > "+" < td > belong < select class = 'form - 90' Name = 'detail [+ VueObj i. "+"] [belong]' > < option value = 'owners' > owner < option > < option value =' companies' > company < option > < / select > < / td >" Price + "< td > < input type =" text "class =" the form - 90 "name = 'detail [" + VueObj i. +"] [price]' > < / td > "+" < td > note < select class = 'form - 90' Name ='detail["+ vueobj.i +"][bill_type]'><option value=' none '> None </option><option value='1'> Invoice </option><option Value = "3" > receipt < option > < / select > < / td > "+" < td > place < select class = 'form - 90' name = 'detail [" + VueObj i. + "] [place]' > < option Value = 'sitting room' > < / sitting room option > < option value = 'bedroom' > bedroom < option > < / select > < / td > "+ '< / tr >' + '< / table >'); $("#product_tab").append($html); $(".img"+ vueobj.i). On ("click",function(){var tabid = '#table'+ vueobj.i; $(this).parent().parent().parent().parent().remove(); // Click clear element}); VueObj.i++; // global variable +1},Copy the code