zoukankan      html  css  js  c++  java
  • js动态添加、删除行

    <meta charset="utf-8">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>利用jquery给指定的table添加一行、删除一行</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    </head>

    <body>
    <script type="text/javascript">
    ////////添加一行、删除一行封装方法///////
    /**
    * 为table指定行添加一行
    *
    * tab 表id
    * row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
    * trHtml 添加行的html代码
    *
    */
    function addTr(tab, row, trHtml){
    //获取table最后一行 $("#tab tr:last")
    //获取table第一行 $("#tab tr").eq(0)
    //获取table倒数第二行 $("#tab tr").eq(-2)
    // var $tr=$("#"+tab+" tr").eq(row);
    var tr=$("#tab tr").eq(row);
    if(tr.size()==0){
    alert("指定的table id或行数不存在!");
    return;
    }
    tr.after(trHtml);
    }

    function delTr(ckb){
    //获取选中的复选框,然后循环遍历删除
    var ckbs=$("input[name="+ckb+"]:checked");
    if(ckbs.size()==0){
    alert("要删除指定行,需选中要删除的行!");
    return;
    }
    ckbs.each(function(){
    $(this).parent().parent().remove();
    });
    }

    /**
    * 全选
    *
    * allCkb 全选复选框的id
    * items 复选框的name
    */
    function allCheck(allCkb, items){
    $("#"+allCkb).click(function(){
    $('[name='+items+']:checkbox').attr("checked", this.checked );
    });
    }

    ////////添加一行、删除一行测试方法///////
    $(function(){
    //全选
    allCheck("allCkb", "ckb");
    });

    function addTr2(tab, row){
    var trHtml="<tr align='center'><td><input type='checkbox' name='ckb'/></td><td><input type='text' name='s1[]' class='ui-input met-center' style='100px;' value='' placeholder='学生姓名'></td><td><input type='text' name='s2[]' class='ui-input met-center' style='100px;' value='' placeholder='登录密码'></td><td><input type='text' name='s[]3' class='ui-input met-center' style='100px;' value='' placeholder='QQ'></td><td><input type='text' name='s4[]' class='ui-input met-center' style='100px;' value='' placeholder='手机'></td><td><input type='text' name='s5[]' class='ui-input met-center' style='100px;' value='' placeholder='监护人姓名'></td><td><input type='text' name='s6[]' class='ui-input met-center' style='100px;' value='' placeholder='监护人联系方式'></td></tr>";
    addTr(tab, row, trHtml);
    }

    function delTr2(){
    delTr('ckb');
    }
    </script>
    <form action="07.php" method="post">
    <table border="1px #ooo" id="tab" cellpadding="0" cellspacing="0" width="100%">
    <tr align="center">
    <td width="30"></td>
    <td width="100">学生姓名</td>
    <td width="100">登录密码</td>
    <td width="100">QQ</td>
    <td width="100">手机</td>
    <td width="100">监护人姓名</td>
    <td width="100">监护人联系方式</td>
    </tr>
    </table>
    <input type="button" onclick="addTr2('tab', -1)" value="添加"><input type="button" onclick="delTr2()" value="删除">
    <input type="submit" name="button" id="button" value="提交">
    </form>
    </body>
    </html>

    转载:

    https://blog.csdn.net/haibo0668/article/details/77726318

  • 相关阅读:
    RCNN,Fast RCNN,Faster RCNN 的前生今世:(4) SSD
    RCNN,Fast RCNN,Faster RCNN 的前生今世:(0) DMP
    nachos3.4 threads管理 (c++)
    逻辑回归与多分类逻辑回归
    [LeetCode]String to Integer (atoi)
    [LeetCode]Reverse Integer
    [LeetCode]ZigZag Conversion
    [LeetCode]Longest Palindromic Substring
    [LeetCode]Median of Two Sorted Arrays
    平面点的旋转公式
  • 原文地址:https://www.cnblogs.com/bangaj/p/9338399.html
Copyright © 2011-2022 走看看