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

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





阅读更多
想对作者说点什么?
相关热词

博主推荐

换一批

没有更多推荐了,返回首页