JQuery動態給table添加、刪除行

jopen 13年前發布 | 7K 次閱讀 C語言

<html> 
<head> 
<SCRIPT language=JavaScript src="jquery.js" mce_src="jquery.js"></SCRIPT> 
<SCRIPT language=JavaScript> 
$("document").ready(function(){ 
    //第六個表格的刪除按鈕事件綁定  
    $("#tbody6 .del").click(function() {  
        $(this).parents(".repeat").remove();  
    });  
    //第六個表格的添加按鈕事件綁定  
    $("#add6").click(function(){  
       // $("#tbody6>.template")  
            //連同事件一起復制  
           // .clone(true)  
            //去除模板標記  
           // .removeClass("template")  
            //修改內部元素  
           /// .find(".content")  
           //     .text("新增行")  
          //      .end() 
          // .find(".del")  
          //      .text("刪除")  
          //      .end()       
            //插入表格  
          //  .appendTo($("#tbody6"))  
          $("#table6").append("<tr><td>33</td><td>44</td></tr>");
    });  
} 
) 
</script> 
</head> 
<body> 
    <table border=1 id="table6">  
    <tbody id="tbody6">  
        <tr class="template repeat">  
            <td class="content">這里是模板 by yanleigs Email:landgis@126.com</td>  
            <td><button class="del">模板,不要刪除</button></td>  
        </tr>  
        <tr class="repeat">  
            <td class="content">這行原來就有</td>  
            <td><button class="del">刪除</button></td>  
        </tr>  
        <tr class="repeat">  
            <td class="content">這行原來就有</td>  
            <td><button class="del">刪除</button></td>  
        </tr>  
    </tbody>  
    <tfoot>  
        <tr>  
            <td> </td>  
            <td><button id="add6">添加</button></td>  
        </tr>  
    </tfoot>  
</table>  
</body> 
</html>

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！