Jquery之动态操作table

来源：互联网发布：360 禁止程序访问网络编辑：程序博客网时间：2024/05/18 22:16

首先创建test.html文件，内容如下：
这里用的jQuery版本是jquery-1.8.2.js,

点击下载jquery-1.8.2.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>   </head>  <body>    <table id="tableID" border="1" align="center" width="60%">        <thead>            <tr>                    <th>用户名</th>                <th>密码</th>                <th>操作</th>            </tr>        </thead>        <tbody id="tbodyID">            <!-- 动态增加行             <tr>                <td>哈哈</td>                <td>123</td>                <td><input type="button" value="删除" onclick=""/></td>            </tr>            -->        </tbody>    </table>    <hr/>    用户名：<input type="text" id="usernameID"/>    密码：  <input type="text" id="passwordID"/>            <input type="button" value="增加" id="addID"/>  </body>  <script type="text/javascript">        //定位"增加"按钮，同时添加单击事件        $("#addID").click(function(){            //获取用户名和密码的值            var username = $("#usernameID").val();            var password = $("#passwordID").val();            //去掉二边的空格            username = $.trim(username);            password = $.trim(password);            //如果用户名或密码没有填            if(username.length == 0 || password.length == 0){                //提示用户                                  alert("用户名或密码没有填");            }else{                //创建1个tr标签                var $tr = $("<tr></tr>");                //创建3个td标签                var $td1 = $("<td>"+username+"</td>");                var $td2 = $("<td>"+password+"</td>");                var $td3 = $("<td></td>");                //创建input标签，设置为删除按钮                var $del = $("<input type='button' value='删除'>");                //为删除按钮动态添加单击事件                $del.click(function(){                    //删除按钮所有的行，即$tr对象                    $tr.remove();                });                //将删除按钮添加到td3标签中                $td3.append($del);                //将3个td标签依次添加到tr标签中                $tr.append($td1);                $tr.append($td2);                $tr.append($td3);                //将tr标签添加到tbody标签中                $("#tbodyID").append($tr);                //清空用户名和密码文本框中的内容                $("#usernameID").val("");                $("#passwordID").val("");            }        });  </script></html>效果如下：

这里写图片描述

源码下载：点击下载更多源码

阅读全文

0 0