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>
  • 相关阅读:
    [转] Java 基础
    IDEA 入门
    如何将本地的一个新项目上传到GitHub上新建的仓库中去
    多线程学习
    Java泛型中E、T、K、V等的含义
    数据结构
    5W1H
    mysql语句sum求和为null的问题
    java 开发体系参考学习
    linux下发邮件
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11433713.html
Copyright © 2011-2022 走看看