[實作] jQuery 新增刪除表格

由於最近都在寫專題,所以也學了一點 jQuery ,在學 jQuery 之前我已經有先學過 DOM 這個麻煩的東東,所以對於用 DOM 來新增元素並插入子節點這部分多少有一些了解了。
然後我需要將資料轉成表格,所以我趁這個機會順便學習 jQuery ,但由於我還是個 jQuery 新手所以還是要拜一下 Google 和 jQuery 手冊。
既然用 jQuery 那就因該用 jQuery 方式來寫,而不是像 jquery 簡單新增移除table rows 這篇文章插入一段 HTML 字串!!


首先看到 Javascript 部分,我們可以看出 jQuery 新增一個元素 $('<tr>') 是非常簡短的!! 然後再利用 .parents() 來取得父節點 jQurty 物件
function addRow(){
    $('table tbody').append(
         $('<tr>').append(
                $('<tr>').text($('table tbody tr').length),
                $('<tr>').html(
                    $('<input>').attr("type","button")
                                .attr("value","remove this")
                                .click(function() {
                                    $(this).parents("tr:first").remove();
                                })
                )
             )
    );
}
function removeRow(){
    $('table tbody tr:last').remove();
}
最後這裡附上一個完整檔案下載 create_Table_row.html

Share this

Related Posts

Previous
Next Post »