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

  • 相关阅读:
    DP 免费馅饼 HDU1176
    知了课堂 Python Flask零基础 笔记整理
    Splay入门
    字典树
    榨取kkksc03 多维dp
    种族并查集总结
    倍增总结
    求最大公因数(辗转相除法&更相减损术)
    Bzoj 3036: 绿豆蛙的归宿(期望)
    Bzoj 1497: [NOI2006]最大获利(最小割)
  • 原文地址:https://www.cnblogs.com/bangaj/p/9338399.html
Copyright © 2011-2022 走看看