2023年7月9日发(作者：)

利⽤JQuery获取事件源点击表格内加减号实现添加删除⼀⾏输⼊框⾃⼰是⼩⽩，最近做项⽬要实现加减号⽣成表格，就硬写了js实现该功能，前提是引⼊JQuery，bootstrap；如下1 2 3 在给+-号设置点样式： 1 .addInputReturn{ 2 background:#2ac476 ; 3 border-radius: 30%; 4 color: white; 5 font-size: large; 6 } 7 .addInputReturn:hover,.delInput:hover{ 8 color: white; 9 }10 .delInput{11 background-color: #f50;12 border-radius: 30%;13 color: white;14 font-size: large;15 }html 页⾯代码如下，td要记得加class类名 是通过类名获取的： 1

2 3 4 5 6 7 8 9 10 11 12 13 14 15 18 19 20 21 22 23 24 25

26

27

	配件编号	配件名称	配件数量	配件总价	已领取数量	状态
16 ⼗17

页⾯效果图： 要实现的点击加号⽣成⼀⾏相同的格式如下图：以下是JQuery代码；通过点击事件，获取事件源，遍历⽣成新的表格： 1 /*********** 加减⽣成表格 ******************** */ 2 $('document').ready(function () { 3 //先获取table,点击class = addInputReturn的 按钮,执⾏后⾯的函数 4 $("#sample-table").on('click', '.addInputReturn', function () { 5 /*var td=$("table").children("tbody").html();*/ 6

7 //添加减号 8 /*var th = $("table").children("thead").children("tr").children("th").length-1;*/ 9 var del = "";10 del += '';11 del += '⼀';12 del += '';13 $(this).parent().append(del);14 //去除加号15 ();16

17 var html = "";18 html +='' +19 '' +20 '⼗' +21 '' +22 '';23

24 var td = $('tbody tr:first-child .td').each(function () {25 html +='';26 html += $(this).html();27 html +='';28

29 });30 // var td = $(".td")[0];31 // (td);32

33

34

35 /*html += '';36 html += '⼗ ';37 var tabletext='';38 for (var i=0;i

43

44 // html += td;45 // html +='';46 html +='';47 $("#sample-table").append(html);48 });49 /********表格⽣成结束*******/50

51

52 $("body").on('click', '.delInput', function () {53 //获取当前点击的元素的⽗级的⽗级进⾏删除54 $(this).parent().parent().remove();55 });56 });这样就好了，很好理解 但是中间出了不少问题记录⼀下。