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

最新推荐文章于 2021-05-31 16:47:29 发布

xi_weina

最新推荐文章于 2021-05-31 16:47:29 发布

阅读量1.1w

点赞数 2

文章标签： table jquery javascript border email function

本文链接：https://blog.csdn.net/xi_weina/article/details/7384712

版权

//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>

xi_weina

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现自动添加table表格及内容

//table 实现tabe表格中tr td的自动添加table{ width:500px; border:1px solid #FFF; border-collapse:collapse; }table tr { border:1px #FFF solid; }table tr td {
复制链接

扫一扫