利用jquery給指定的table新增一行、刪除一行

wl1121發表於2009-05-22

 

<table id="table6" class="caseTable">
            <tbody id="tbody6">
                <tr class="template repeat">
                    <td id="t1" class="btd">
                        商品名或通用名
                    </td>
                    <td id="t2" class="btd">
                        給藥次數(次/日)
                    </td>
                    <td id="t3" class="btd">
                        每次用藥量(/次)
                    </td>
                    <td id="t4" class="btd">
                        使用原因
                    </td>
                    <td id="t5" class="btd">
                        開始日期
                    </td>
                    <td id="t6" class="btd">
                        結束日期
                    </td>
                    <td id="t7" class="btd">
                        末次就診時是否仍在使用
                    </td>
<td><a class="del" href="#"></a></td>
                </tr>
            </tbody>
        </table>

 

上面是模板表格

 新增一個按鈕

 

 <input id="btnAdd" class="btn3_mouseout" type="button" value="添  加" /></div>

 新增js

 

 $("#tbody6>.template")
                //連同事件一起復制   
               .clone(true)
                //去除模板標記   
                .removeClass("template")
                //修改內部元素   
                .find(".content")
                .text("所要新增的資訊"
                )
                .end()
                .find(".del")
                .text("刪除")
                .end()
                //插入表格
                .appendTo($("#tbody6"))

 刪除事件

    //表格的刪除按鈕事件繫結   
            $("#tbody6 .del").click(function() {
                $(this).parents(".repeat").remove();
            });
 

 

相關文章