将输入框的内容追加到表格中

最新推荐文章于 2021-06-25 21:20:53 发布

Charlie·

最新推荐文章于 2021-06-25 21:20:53 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/Mydtudysy/article/details/77870492

版权

<!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-1.11.1.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();
                if (a!=null&a!=""&b!=null&b!=""&c!=null&c!=""){
                 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>";
                  $("table").append(text);
                    $("div input").val("");
                }else{
                    alert("内容未添加完整");
                }
               $(".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>
</table>
</body>
</html>

Charlie·

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
将输入框的内容追加到表格中

将输入框的内容追加到表格中获取name为test的input文本框中的内容的jQuery代码为：$("input:text[name='test']").val()；jQuery提供了三个简单实用的用于获取元素内容的方法：text() —— 设置或返回所选元素的文本内容html() —— 设置或返回所选元素的内容（包括 HTML 标记）val() —— 设置或返回表单字段的值因为input属于表单元素，所以获取其内容使用的是val()方法。
复制链接

扫一扫