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>
  • 相关阅读:
    Linux学习进阶路线图
    Ubuntu打开终端的方法三种
    Linux下显示IP地理位置信息的小工具-nali
    kail2 linux 安装vmware tools
    Ubuntu下apt-get命令详解
    Eclipse安卓开发环境
    纪念逝去的计算器之计算表达式结果
    今年暑假要AC
    结课博客作业
    第七次课程作业
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11433713.html
Copyright © 2011-2022 走看看