前言:
代码不一定最实用,但是对于初学者有一定的帮助!
主要步骤:
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(){
var names = $('.name').val();
var ages = $('.age').val();
addTable(names,ages);
}
var id =0;
function addTable(value2,value3){
id +=1;
var personArray = new Array();
function person(number,name,age){
this.name=name;
this.age=age;
this.number=number;
}
var p1 = new person(id,value2,value3);
personArray.push(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>");
}
}