html元素的動態新增和刪除程式碼例項

antzone發表於2017-04-10
HTML

本章節分享一段程式碼例項，它實現了html元素的動態新增或者刪除效果。

程式碼是由原生javascript實現的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body, td, caption, input {
  font-size: 12px;
}
.test {
  border-collapse: collapse;
}
.test td {
  border: 1px solid #ccc;
  line-height: 150%;
}
</style>
<script language="javascript">
 var count = 0;
//新增新使用者的操作
function addNewUser() {
  //得到文字框物件
  var objName = document.getElementById('name');
  if (objName.value == "") {
    alert("使用者名稱不能為空！");
    objName.focus();
    return;
  }
  else {
    count++;
    //先建立行tr
    var row = document.createElement("tr");
    //設定行物件的ID屬性為使用者輸入的使用者名稱稱
    row.setAttribute("id", objName.value + count);
    //建立td物件
    var column = document.createElement("td");
    //td物件下新增子節點 - 內容 TextNode 物件
    column.appendChild(document.createTextNode(objName.value));
    //row物件將td物件新增為子節點物件
    row.appendChild(column);
 
    //再建立刪除按鈕
    var delBtn = document.createElement("input");
    //型別
    delBtn.setAttribute("type", "button");
    //文字
    delBtn.setAttribute("value", "Delete");
 
    //設定物件的事件處理 - 所呼叫的函式
    var name = objName.value + count;
    delBtn.onclick = function () { delUser(name); };
 
    column = document.createElement("td");
    column.appendChild(delBtn);
 
    //行物件新增
    row.appendChild(column);
    //新增這一行到tbody中
    document.getElementById('userList').appendChild(row);
    objName.value = "";
  }
}
//刪除元素
function delUser(name) {
  if (name != null) {
    var objRow = document.getElementById(name);
    var objTBODY = document.getElementById("userList");
    //刪除
    objTBODY.removeChild(objRow);
  }
}
</script>
</head>
<body>
  <table align="center" width="40%" cellspacing="0" class="test">
    <caption align="center">動態新增使用者</caption>
    <tr>
      <td>新增新的使用者名稱</td>
      <td>
        <input type="text" id="name">
        <input type="button" value="添 加" onClick="addNewUser()">
      </td>
    </tr>
    <tr>
      <td colspan="2">使用者資訊</td>
    </tr>
    <!--表格主體-->
    <tbody id="userList"></tbody>
  </table>
</body>
</html>

相關文章