JQUery动态表格（后台数据查看器）

前言：

		代码不一定最实用，但是对于初学者有一定的帮助！
		主要步骤：
				1.获取某个数据，可以是数据库，或者像我的一样获取HTML中的文本，添加到表格中。
				2.用到的jQuery方法主要有：
					值得获取val(),
					追加方法append（），
					数组的创建new Array（），
					向数组的末尾添加方法push(p1)，              
					类的创建，和对象的创建.
				3.

HTML

   <table id="table1" cellpadding=0>
       <tr>
           <th>编号</th> <th>姓名</th> <th>年龄</th>
       </tr>
   </table>
   
   //表格‘#table2’是为了实现，数据填写和按钮的存放位置（为了美观）
   <table id="table2">	
       <tr>
           <td><input type="text" class="id" placeholder="ID"></td> 
           <td><input type="text" class="name" placeholder="name"></td> 
           <td><input type="text" class="age" placeholder="age"></td>
       </tr>
   </table>
   <div class="btn">
   		<input id="add" type="button" value="添加" onclick="add()">
   </div>
  

CSS

<style>
        table{width: 500px; border: 1px #ccc solid; padding: 5px;margin: 20px auto; border-collapse: collapse; margin-bottom: 0;}
        th{ border: 1px solid #3F3F3F; background-color: #3F3F3F;color: #fff;padding: 5px 10px; }
        td{ border: 1px solid #3F3F3F; padding: 5px 10px; font-size: 16px; text-align: center; }
        #table2{ margin-top: 0;}
        input{border: none;}
        input[type=text]{ width: 100px; border: none;}
        #add{width: 500px;height: 30px; border: 1px #000 solid;border-top: none;}
        .btn{margin: 0 auto; width: 500px;}
</style>

js

function add(){
            
            //获取input中的值
            // var ids = $('.id').val();
            var names = $('.name').val();
            var ages = $('.age').val();

            addTable(names,ages);   //调用添加表格一行数据的方法，并赋值
        }

        var id =0;
        function addTable(value2,value3){ //添加表格一行数据（三列的）
            id +=1;
            var personArray = new Array();      //创建person数组

            function person(number,name,age){   //定义person方法
                this.name=name;
                this.age=age;
                this.number=number;
            }

            var p1 = new person(id,value2,value3); //new person 的对象
            personArray.push(p1);                      //向数组的末尾添加一个元素 'p1'
          
            for(var i=0;i<personArray.length;i++){
                console.log(personArray[i]);
                $('#table1').append("<tr><td>"+personArray[i].number+"</td> <td>"+personArray[i].name+"</td> <td>"+personArray[i].age+"</td></tr>");
            }
}