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

  • 相关阅读:
    谋哥:这个时代没有比程序员更适合创业
    《人人都可以创业》连载1:创业很简单,从心开始
    谋哥:悟马道长第一句话之“不要赚屌丝的钱”
    谋哥:App开发者的苦逼不值得怜悯!
    我们都傻不啦叽为《围住神经猫》免费推广!
    谋哥:转型之痒与App推广之痛
    学习IOS开发项目篇--如何让程序在后台保持挂起状态
    学习IOS开发项目篇--SDWebImage基本使用
    学习IOS开发网络多线程篇--NSThread/GCD/
    学习IOS开发UI篇--UICollectionViewController的基本使用
  • 原文地址:https://www.cnblogs.com/bangaj/p/9338399.html
Copyright © 2011-2022 走看看