jquery实现自动添加table表格及内容

最新推荐文章于 2021-09-22 20:59:53 发布

原创最新推荐文章于 2021-09-22 20:59:53 发布 · 1.1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#table #jquery #javascript #border #email #function

本文介绍了一个使用jQuery实现的动态表单功能，用户输入姓名、email和电话后点击提交按钮，即可将信息添加到下方的表格中。同时，表格提供删除功能，方便用户管理已录入的数据。

//table 实现tabe表格中tr td的自动添加
<style type="text/css">
table{
    width:500px;
    border:1px solid #FFF;
    border-collapse:collapse;
    }
table tr
        {
        border:1px #FFF solid;
        }
table tr td
        {
        border:1px #FFF solid;
        }
</style>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    
    $("#tijiao").click(function(){
        //获取用户名
        var $user=$("#user").val();
        //获取email
         var $email=$("#email").val();
        //获取电话号
        var $tel=$("#telephone").val();
        var $tr=$("<tr><td>"+$user+"</td><td>"+$email+"</td><td>"+$tel+"</td><td><a href='javascript:void(0)' class='a'>删除</a></td></tr>");
        //alert($tr);
        $tr.appendTo("#table1");
        $(".a").click(function(){
            $(this).parent().parent().remove();
            });
        });
        
    
    });

</script>
</head>
<body>
<div style="width:700px; height:300px; background:#999; margin:auto">
<p style="margin-left:300px">添加用户</p>
姓名：<input type="text" id="user"> email<input type="text" id="email"> 电话<input type="text" id="telephone"><br>
<input type="button" id="tijiao" value="提交" align="middle" style="margin-left:300px;">
<hr>
<table align="center"  border="1" id="table1">
<tr><th>姓名</th><th>email</th><th>电话</th></tr>
</table>
</div>