zoukankan      html  css  js  c++  java
  • 使用jQuery创建可删除添加行的动态表格,超级简单实用的方法

    使用jQuery动态的添加和删除表格里面的行,不多说了直接上代码。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>元素的添加与删除</title>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <script type="text/javascript" src="jquery-1.10.1.js"></script>
    </head>
    <body>
    <form>
    <table border="1px" width="200px" id="table1">
        <tr style="height: 20px">
            <td>0</td>
            <td ><input type="button" οnclick="add(this);" value="添加"></td>
        </tr>
        <tr style="height: 20px">
            <td>1</td>
            <td ><input type="button" οnclick="del(this);" value="删除"></td>
         </tr>
        <tr id="tr2" style="height: 20px">
        <td>2</td>
            <td ><b οnclick="del(this);">删除</b></td>
        </tr>
    </table>
    </form>
    </body>
    <script type="text/javascript">
        var i=3;
    function del(e) {
     
        $(e).parent().parent().remove();
        i--;
    }
    
    function add() {
    
        $("#table1").append("<tr style="height: 20px">
    " +
            "        <td>"+i+"</td>
    " +
            "        <td ><input type="button" οnclick="del(this);" value="删除"></td>
    " +
            "     </tr>")
        i++;
    }
    
    </script>
    </html>
  • 相关阅读:
    Populating Next Right Pointers in Each Node II
    Populating Next Right Pointers in Each Node
    Construct Binary Tree from Preorder and Inorder Traversal
    Construct Binary Tree from Inorder and Postorder Traversal
    Path Sum
    Symmetric Tree
    Solve Tree Problems Recursively
    632. Smallest Range(priority_queue)
    609. Find Duplicate File in System
    poj3159最短路spfa+邻接表
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11433713.html
Copyright © 2011-2022 走看看