简单的动态表格

1.png

这是我们最终的成果！
现在我们一步一步来进行！
1、上面三个输入框，我们可以用input标签来创建，但是里面的type为text,而最后的保存键我们也能用input创建，只是把他的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创建，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来进行设置。
4、最后呢，我们通过jQuery来进行列表的动态创建，并且对其添加元素，实现一些基础操作。

<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创建 tr，再通过for循环创建 td，然后将上面手动输入的内容对应填入表格。
这里面我添加的操作是删除，可以对应删除相应行的内容。