需求：通过点击添加、删除按钮能够增加或删除一行
思路：先写出一行tr，将此tr内的html追加到容器中，实现添加功能
页面代码：
<div class="easyui-panel" title="商品信息" data-options="collapsible:true" style="width:99%;height:auto;padding:10px;"> <div> <a href="javascript:void(0);" id="addOrderItem"> <img src="${base}/static/scripts/component/easyui/themes/icons/edit_add.png" > </a> </div> <table class="form-table-container"> <tbody> <tr> <td class="form-table-td-one">商品编码：</td> <td> <select id="skuIdOptions" name="productSku" class="common-select-style-one"> <option value="">--请选择--</option> </select> </td> <td class="form-table-td-one">商品数量：</td> <td> <input type="text" name="buyNumber" class="common-input-style-one" required="true" validtype="length[1,30]"> <input type="hidden" name="orderNO" value="" > <div style="display:inline;"> <a href="javascript:void(0);" class="delOrderItem" οnclick="gotoDelTr(this);"> <img src="${base}/static/scripts/component/easyui/themes/icons/edit_remove.png" > </a> </div> </td> </tr> </tbody> </table> </div> js代码：除了第一行元素外，剩下的元素都是在页面加载完后通过js生成的，无法通过.click方法添加点击事件，可通过on方法将事件绑定到父元素table上。但这样无法确定当前点击的是哪一个删除元素，无法实现删除功能。在页面中添加onclick，传入this（当前dom对象a元素）。通过$(domObj).parents("tr").remove();删除其所在的tr行。 //按钮点击增加input行 $("#addOrderItem").click(function(){ gotoAddTr(); }); //按钮点击删除input行 // $(".delOrderItem").click(function(){ // alert(22); // gotoDelTr(); // }); // $("table").on("click",".delOrderItem",function(){ // alert(22); // gotoDelTr(); // }); //增加tr function gotoAddTr(){ //var html = $("form table tbody tr:first").html(); //通过dom元素的outerHTML属性获取包括该元素在内的html内容 var html = $("form table tbody tr:first").prop("outerHTML"); $("form table tbody").append(html); } //删除tr function gotoDelTr(domObj){ //通过当前dom对象找到父元素tr console.log(1111); $(domObj).parents("tr").remove(); }