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:

// 第三步创建几个对象

function Person(name,sex,age,placee){

              this.name = name;

              this.sex= sex;

              this.age = age;

              this.placee = placee;

}

//第四步 增加,prototype 属性使您有能力向对象添加属性和方法。

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("更新成功");

}

// 第一步写数组

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;

}