jQuery输入框点击添加在下面列表显示可以进行删除

来源：互联网发布：待业在家知乎编辑：程序博客网时间：2024/05/14 06:49

输入框点击添加在下面列表显示可以进行删除

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        div input{            margin-left: 40px;        }        table{            margin-top: 40px;            border-collapse: collapse;        }        td{            width: 150px;            height: 40px;            border: 1px solid #000;            text-align: center;        }    </style>    <script src="jQuery/jquery-1.12.0.min.js"></script>    <script>        $(function () {            $("#btn").click(function () {                var a=$("div input").eq(0).val();                var b=$("div input").eq(1).val();                var c=$("div input").eq(2).val();                var text="<tr><td><input type='checkbox' class='checkItem'></td><td>"+a+"</td>+<td>"+b+"</td>+<td>"+c+"</td><td><button class='sc'>删除</button></td></tr>"                $("tbody").append(text);                $(".sc").click(function () {                    $(this).parents("tr").remove();                });            });            $("#checkAll").click(function(){                if($(this).is(":checked")){                    $(".checkItem").prop("checked",true);                }else{                    $(".checkItem").prop("checked",false);                }            })        })    </script></head><body><div>    <input type="text">姓名    <input type="text">密码    <input type="text">邮箱    <button id="btn">添加</button></div><table>    <thead><tr><td><input type="checkbox" id="checkAll"></td><td>姓名</td>    <td>密码</td><td>邮箱</td><td>操作</td></tr>    </thead>    <tbody>    </tbody></table></body></html>

阅读全文

0 0