js添加table数据到第一行

js添加table数据到第一行

var tbody = document.createElement("tbody"); //获取tbody对象

function add(name,sex,phone){

    var tr = document.createElement("tr");    //创建一个tr标签

    tr = tbody.insertRow(0);    //设置添加到第一行，默认-1添加到最后一行

//添加table数据

     //第一个td
     var td = document.createElement("td");
     var checkbox = document.createElement("input");
     checkbox.type = "checkbox";
     td.appendChild(checkbox);
     tr.appendChild(td);

     //第二个td
     var td2 = document.createElement("td");
     td2.innerText = name;
     tr.appendChild(td2);

     //第三个td
     var td3 = document.createElement("td");
     td3.innerText = "***";
     tr.appendChild(td3);

     //第四个td
     var td4 = document.createElement("td");
     td4.innerText = sex;
     tr.appendChild(td4);

     //第五个td
     var td5 = document.createElement("td");
     td5.innerText = phone;
     tr.appendChild(td5);

     //第六个td
     var td6 = document.createElement("td");
     var img = document.createElement("img");
     img.src = "image/XMB2.jpg";
     img.style.width="50px";
     img.style.height="50px";
     td6.appendChild(img);
     tr.appendChild(td6);

     //第七个td
     var td7 = document.createElement("td");
     var btnFob = document.createElement("input");
     btnFob.type = "button";
     //添加一个自定义属性：key/value
     btnFob.setAttribute("username",userList[i].username);
     btnFob.setAttribute("id",i);
     btnFob.value = "禁用";
     btnFob.style = "padding:5px 5px 5px 5px;margin-right:5px;";
     btnFob.onclick = function(){
      var username = this.getAttribute("username");
      var id = this.getAttribute("id");
      var re = window.confirm("是否"+this.value+"用户:"+username);
      if(re){
       if(this.value=="禁用"){
        userList[id].state=false;
        if(!userList[id].state){
         alert("禁用成功!用户:"+username+",状态:"+userList[id].state);
         this.value="启用";
        }else{
         alert("禁用失败!");
        }
       }else if(this.value=="启用"){
        userList[id].state=true;
        if(userList[id].state){
         alert("启用成功!用户:"+username+",状态:"+userList[id].state);
         this.value="禁用";
        }else{
         alert("启用失败!");
        }
       }
      }
     }
     td7.appendChild(btnFob);
     var btnReset = document.createElement("input");
     btnReset.type = "button";
     btnReset.value = "重置密码";
     btnReset.style = "padding:5px 5px 5px 5px;margin-left:5px;";
     btnReset.onclick = function(){
      alert("重置密码");
     }
     td7.appendChild(btnReset);
     tr.appendChild(td7);

     //2将这个tr标签 （附加appendChild）放入到userTbody里
     userTbody.insertBefore(tr,tr);   

// appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。

// insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。

}