jQuery 表单中输入内容,提交的时候,将数据提交表格当中

时间:2020-7-31 作者:admin


案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery引入文件/jquery-1.8.2.js"></script>
    <script>
        $(function() {
            // 给提交一个点计事件
            $("input[type=button]").click(function() {
                // 获取姓名input中id为username的值
                var $username = $("#username").val();
                // 获取年龄input中ID为age的值
                var $age = $("#age").val();
                // 获取电话input中id为tel的值
                var $tel = $("#tel").val();
                $("table").append("<tr><td>" + $username + "</td><td>" + $age + "</td><td>" + $tel + "</td><td><a class='del' href='javascript:ovid(0)'>删除</a></td></tr>");

            });
            // 点击删除按钮删除掉当前行
            // live:class为del的元素绑定一个live.使用live时候,后续添加元素也会与当前兄弟元素事件一样
            // parents 匹配祖先元素
            // parent 匹配父元素
            $(".del").live("click", function() {
                $(this).parents("tr").remove();
            })
        })
    </script>
</head>

<body>
    <center>
        <form action="" method="post">
            姓名: <input type="text" name="username" id="username" value="">
            <div></div>
            年龄: <input type="text" name="age" id="age" value="">
            <div></div>
            电话: <input type="text" name="tel" id="tel" value=""><br>
            <input type="button" name="" id="" value="提交">

        </form>
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>斩杀</td>
                <td>22</td>
                <td>11111111111111</td>
                <td>
                    <a href="javascript:void(0) " class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td>小三格格</td>
                <td>16</td>
                <td>11111111111111</td>
                <td>
                    <a href="javascript:void(0) " class="del">删除</a>
                </td>
            </tr>
        </table>
    </center>
</body>

</html>

可删除可添加…代码无误
jQuery    表单中输入内容,提交的时候,将数据提交表格当中

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。