html:
<table>
? ? ? ? ?<caption>添加用戶</caption>
? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? <td>姓名</td>
? ? ? ? ? ? ? ? ? <td><input type="text" id="username"></td>
? ? ? ? ? </tr>
? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ?<td>性別</td>
? ? ? ? ? ? ? ? ?<td><input type="text" id="sex"></td>
? ? ? ? ? ?</tr>
? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ?<td>年齡</td>
? ? ? ? ? ? ? ? ? ?<td><inout type="text" id="age"></td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ?<td>所在地</td>
? ? ? ? ? ? ? ? ? ? ?<td><input type="text" id="place"></td>
? ? ? ? ? ? ?</tr>
? ? ? ? ? ? ?<tr>
? ? ? ? ? ? ? ? ? ? ?<td>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button onclick="addUser()">添加</button>
? ? ? ? ? ? ? ? ? ? ?</td>
? ? ? ? ? ? ? </tr>
</table>
<div id="con"></div>
js:
// 第三步創(chuàng)建幾個對象
function Person(name,sex,age,placee){
? ? ? ? ? ? ? this.name = name;
? ? ? ? ? ? ? this.sex= sex;
? ? ? ? ? ? ? this.age = age;
? ? ? ? ? ? ? this.placee = placee;
}
//第四步 增加,prototype 屬性使您有能力向?qū)ο筇砑訉傩院头椒ā?br>
Person.prototype.add=function(){
? ? ? ? ?var user ={};
? ? ? ? ?user.name =this.name;
? ? ? ? ? user.sex =this.sex;
? ? ? ? ? user.age =this.age;
? ? ? ? ? user.placee =this.placee;
? ? ? ? ? users.push(user);
? ? ? ? ? user={};//下次加的時候為空
}
// 第六步做修改
Person.prototype.up=function(i){
? ? ? ? ?var user=users[i];
? ? ? ? ? user.name=this.name;
? ? ? ? ? user.sex=this.sex;
? ? ? ? ? user.age=this.age;
? ? ? ? ? user.placee=this.placee;
}
// 第五步增加
function addUser(){
? ? ? ? var username = document.getElementById("username").value;
? ? ? ? ?var sex = document.getElementById("sex").value;
? ? ? ? ? var age = document.getElementById("age").value;
? ? ? ? ? var placee = document.getElementById("placee").value;
? ? ? ? ? ?var p1=new Person(username,sex,age,placee);
? ? ? ? ? ? p1.add();
? ? ? ? ? ? bindUser();
}
// 第7步刪除
function delUser(i){
? ? ? ? ?if(confirm("確定刪除嗎？")){
? ? ? ? ? ? ? ? ? ? users.splice(i,1);
? ? ? ? ? ? ? ? ? ? bindUser();
? ? ? ? ? ?}
}
// 第七步更新
function upUser(i){
? ? ? ? ? ? var username = document.getElementsByClassName("name"+i)[0].innerHTML;
? ? ? ? ? ? var sex = document.getElementsByClassName("sex"+i)[0].innerHTML;
? ? ? ? ? ? var age = document.getElementsByClassName("age"+i)[0].innerHTML;
? ? ? ? ? ? var placee = document.getElementsByClassName("placee"+i)[0].innerHTML;
? ? ? ? ? ? var p1 = new Person(username,sex,age,placee);
? ? ? ? ? ? p1.up(i);
? ? ? ? ? ? bindUser();
? ? ? ? ? ? ?alert("更新成功");
}
// 第一步寫數(shù)組
var users = [
? ? ? ? ?{name: "hh",sex:"女",age:23,placee:"廣州"},
? ? ? ? ? {name: "ff",sex:"男",age:27,placee:"江西"},
? ? ? ? ? {name: "花花",sex:"女",age:23,placee:"廣州"},
? ? ? ? ? {name: "鋒",sex:"男",age:27,placee:"廣州"},
? ? ? ? ? ?{name: "hh",sex:"女",age:28,placee:"廣州"},
? ? ? ? ? ?{name: "hh",sex:"女",age:28,placee:"廣州"},
];
// 第二步寫入頁面
window.onload=function(){
? ? ? ? ? ? ?bindUser();
}
function bindUser(){
? ? ? ? ? ? var str="<table>";
? ? ? ? ? ? ?str+="<tr><th>編號</th><th>姓名</th><th>性別</th><th>年齡</th><th>所在地</th><th>刪除</th><th>更新</th><tr>";
? ? ? ? ? ? ?for(var i=0;i<users.length;i++){
? ? ? ? ? ? ? ? ? ? ? ? ?str+="<tr>";
? ? ? ? ? ? ? ? ? ? ? ? ?str+="<td>"+(i+1)+"</td>;
? ? ? ? ? ? ? ? ? ? ? ? ? str+="<td contenteditable='true' class='name"+i+"'>"+users[i].name+"</td>;
? ? ? ? ? ? ? ? ? ? ? ? ? str+="<td contenteditable='true' class='sex"+i+"'>"+users[i].sex+"</td>";
? ? ? ? ? ? ? ? ? ? ? ? ? str+="<td contenteditable='true' class='age"+i+"'>"+users[i].age+"</td>";
? ? ? ? ? ? ? ? ? ? ? ? ? ?str+="<td contenteditable='true' class='placee"+i+"'>"+users[i].placee+"</td>";
? ? ? ? ? ? ? ? ? ? ? ? ? ? str+="<td><button onclick='delUser("+i+")'>刪除</button></td>";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?str+="<td><button onclick='upUser("+i+")'>更新</button></td>";
? ? ? ? ? ? ?}
? ? ? ? ? ? ? str +="</table>";
? ? ? ? ? ? ? document.getElementById("con").innerHTML = str;
}
