form表单中删除、增加tr

来源：互联网发布：快速排序算法实现编辑：程序博客网时间：2024/05/23 10:15

需求：通过点击添加、删除按钮能够增加或删除一行

思路：先写出一行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" onclick="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();//    });//增加trfunction 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);}//删除trfunction gotoDelTr(domObj){//通过当前dom对象找到父元素trconsole.log(1111);$(domObj).parents("tr").remove();}

阅读全文

0 0