js创建表格动态增加行并删除行

来源：互联网发布：台湾人深圳知乎编辑：程序博客网时间：2024/05/29 17:04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>添加用户</title>
</head>
<body>
  <center>
   <br><br>
   添加用户:<br><br>
   姓名: <input type="text" name="name" id="name" />  
   email: <input type="text" name="email" id="email" />  
   电话: <input type="text" name="tel" id="tel" /><br><br>
   <button id="addUser">提交</button>
   <br><br>
   <hr>
   <br><br>
   <table id="usertable" border="1" cellpadding="5" cellspacing=0>
    <tbody>
     <tr>
      <th>姓名</th>
      <th>email</th>
      <th>电话</th>
      <th> </th>
     </tr>
     <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a href="deleteEmp?id=Tom">Delete</a></td>
     </tr>
    </tbody>
   </table>
  </center>
</body>

/******************************************************************************************************/
//创建tr
    var trElement=document.createElement("tr");

//增加td到tr上
    trElement.appendChild(nameTd);
trElement.appendChild(emailTd);
trElement.appendChild(telTd);
trElement.appendChild(aTd);

/******************************************************************************************************/
   //增加tr到table上
   //<table id="usertable" border="1" cellpadding="5" cellspacing=0>
      //<tbody>
   var tableElement=document.getElementById("usertable");

   //创建tbody,为了跨浏览器,要创建tbody
   var tbodyElement=document.createElement("tbody");
   tbodyElement.appendChild(trElement);

   //放置tbody到table上
   tableElement.appendChild(tbodyElement);

/******************************************************************************************************/
//删除
   aElement.onclick=function(){
      //使网页的链接失效
    return delTr(aElement);
   }
/******************************************************************************************************/
   }
}

/**
* @param {Object} aElement
*/
function delTr(aElement){
   /*
    *               <tr>
      <td>
          Tom
      </td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a href="deleteEmp?id=Tom">Delete</a></td>
     </tr>
    */
var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert("name   "+name)

var flag=window.confirm("您真的要删除["+name+"]这个用户吗?");
//alert(flag);

// 点击"取消" 按钮
if(!flag){
   //使网页的链接失效
  return false;
}

//删除
    //获取tbody
     var tbodyElement=aElement.parentNode.parentNode.parentNode;
    //获取tr
     var trElement=aElement.parentNode.parentNode;
    //删除
     tbodyElement.removeChild(trElement);
     //使网页的链接失效

  return false;
}
</script>
</html>