1.png

這是我們最終的成果！
現(xiàn)在我們一步一步來進(jìn)行抵赢！
1、上面三個輸入框，我們可以用input標(biāo)簽來創(chuàng)建铅鲤，但是里面的type為text,而最后的保存鍵我們也能用input創(chuàng)建划提，只是把他的type改為button

            序號:<input id="id" type="text" value=" "/>
            <br />
            <br />
            姓名:<input id="name" type="text" value=" "/>
            <br />
            <br />
            電話:<input id="tel" type="text" value=" "/>
            <br />
            <br />
            <input id="right" type="button" value="保存" />

2、列表我們用table創(chuàng)建邢享，tr表示行鹏往，td表示每行中的格子。接下來我們先做出一個雛形骇塘。

<table id="list" style="border: 1px solid black;" cellspacing="0">
                <tr>
                    <td>序號</td>
                    <td>姓名</td>
                    <td>電話</td>
                    <td>操作</td>
                </tr>
                
            </table>

3伊履、至于顯示的樣式你自己可以通過css來進(jìn)行設(shè)置。
4款违、最后呢唐瀑，我們通過jQuery來進(jìn)行列表的動態(tài)創(chuàng)建，并且對其添加元素奠货，實(shí)現(xiàn)一些基礎(chǔ)操作介褥。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#right').on('click',function(){

                    var tr = $('<tr></tr>')
//                  var aId = $('#id').val()
//                  var aName = $('#name').val()
//                  var aTel = $('#tel').val()
                    var aDel = $('<a href="#">刪除</a>')
                    
//                  var data = [aId, aName, aTel,aDel]
                    
                    for(var i=0;i<3;i++){
                        var td = $('<td></td>')
                        td.html($('input').eq(i).val())
                        td.appendTo(tr)
                    }
                    tr.append($("<td></td>").append(aDel))
                    tr.appendTo('#list') 
                    
                    
                    aDel.on('click',function(){
                        aDel.parent().parent().remove()
                    })
                    
                })
                
            })
        </script>

我這里面是先用jQuery創(chuàng)建 tr，再通過for循環(huán)創(chuàng)建 td递惋，然后將上面手動輸入的內(nèi)容對應(yīng)填入表格柔滔。
這里面我添加的操作是刪除，可以對應(yīng)刪除相應(yīng)行的內(nèi)容萍虽。