JavaScript表格增刪改查詳解

admin發表於2018-11-26
JavaScript

分享一段程式碼例項，實現了對table表格資料的增刪查效果。

雖然標題是增刪改查，但並沒有改這個功能，只是一個習慣性叫法而已。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  姓名：<input type="text" id="user" placeholder="請輸入姓名">
  年齡：<input type="text" id="xh" placeholder="請輸入年齡" />
  <input type="button" value="新增" id="btn" />
  <input type="button" value="搜尋" id="btn1" />
  <table border="1" width="50%" id="table">
    <thead>
      <tr>
        <th>學號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>螞蟻部落一</td>
        <td>div教程</td>
        <td>4</td>
        <td><a href="javascript:;">刪除</a></td>
      </tr>
      <tr>
        <td>螞蟻部落二</td>
        <td>css教程</td>
        <td>4</td>
        <td><a href="javascript:;">刪除</a></td>
      </tr>
      <tr>
        <td>螞蟻部落三</td>
        <td>jquery教程</td>
        <td>4</td>
        <td><a href="javascript:;">刪除</a></td>
      </tr>
      <tr>
        <td>螞蟻部落四</td>
        <td>js教程</td>
        <td>4</td>
        <td><a href="javascript:;">刪除</a></td>
      </tr>
      <tr>
        <td>螞蟻部落五</td>
        <td>正則教程</td>
        <td>4</td>
        <td><a href="javascript:;">刪除</a></td>
      </tr>
    </tbody>
  </table>
<script>
var table = document.getElementById("table");
for (var j = 0; j < table.tBodies[0].rows.length; j++) {
  if (j % 2 == 0) {
    table.tBodies[0].rows[j].style.background = "#ebebeb";
  } else {
    table.tBodies[0].rows[j].style.background = "#ccc";
  }
}
 
var xh = document.getElementById("xh");
var user = document.getElementById("user");
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var num = table.tBodies[0].rows.length;
 
btn1.onclick = function() {
  for (var n = 0; n < table.tBodies[0].rows.length; n++) {
    var str1 = table.tBodies[0].rows[n].cells[1].innerHTML.toLowerCase();
    var str2 = user.value.toLowerCase();
    if (str1.search(str2) != -1) {
 
      table.tBodies[0].rows[n].style.background = "yellow";
 
    }
  }
};
 
btn.onclick = function() {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = ++num;
  if (num % 2 == 0) {
    tr.style.background = "#ccc";
  } else {
    tr.style.background = "#ebebeb";
  }
  var td2 = document.createElement("td");
  td2.innerHTML = user.value;
 
  var td3 = document.createElement("td");
  td3.innerHTML = xh.value;
  var td4 = document.createElement("td");
  td4.innerHTML = "<a href='javascript:;' >刪除</a>"; 
  td4.getElementsByTagName("a")[0].onclick = function() {
    table.tBodies[0].removeChild(this.parentNode.parentNode);
  };
 
  table.tBodies[0].appendChild(tr);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.appendChild(td4);
 
};
 
var arr = [];
for (var index = 0; index < table.tBodies[0].rows.length; index++) {
  arr.push(table.tBodies[0].rows[index].cells[3].getElementsByTagName("a")[0]);
 
}
for (var j = 0; j < arr.length; j++) {
  arr[j].onclick = function() {
    table.tBodies[0].removeChild(this.parentNode.parentNode);
  }
}
</script>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var table = document.getElementById("table")，獲取表格物件。

（2）.for (var j = 0; j < table.tBodies[0].rows.length; j++) ，通過for迴圈遍歷表格中的每一個行。

（3）.if (j % 2 == 0) {

  table.tBodies[0].rows[j].style.background = "#ebebeb";

  } else {

  table.tBodies[0].rows[j].style.background = "#ccc";

}實現哥隔行變色功能，根據奇偶行來設定不同的背景色。

（4）.var xh = document.getElementById("xh")，獲取對應id的元素物件，後面幾個都是同樣道理，不挨個介紹。

（5）.var num = table.tBodies[0].rows.length，獲取行的數目。

（6）.btn1.onclick = function() {}，此事件處理函式實現了查詢功能。

（7）.for (var n = 0; n < table.tBodies[0].rows.length; n++) ，遍歷表格中的每一個行。

（8）.var str1 = table.tBodies[0].rows[n].cells[1].innerHTML.toLowerCase()，獲取第二個單元格的內容，並轉換為小寫。

（9）.var str2 = user.value.toLowerCase()，將要搜尋的關鍵字轉換為小寫形式。

（10）.if (str1.search(str2) != -1) {

  table.tBodies[0].rows[n].style.background = "yellow";

}，如果含有搜尋關鍵字，那麼就將當前航背景設定為黃色。

（11）.btn.onclick = function() {},此事件可以新增一個新行。

（12）.var tr = document.createElement("tr")，建立一個行元素物件。

（13）.var td1 = document.createElement("td")，建立一個td單元格物件。

（14）.td1.innerHTML = ++num,作為新建行的行號。

（15）.if (num % 2 == 0) {

  tr.style.background = "#ccc";

} else {

  tr.style.background = "#ebebeb";

}，實現了隔行變色功能。

（16）.var td2 = document.createElement("td");

td2.innerHTML = user.value;

建立姓名單元格，並賦值。

（17）.td4.getElementsByTagName("a")[0].onclick = function() {

  table.tBodies[0].removeChild(this.parentNode.parentNode);

}，為刪除按鈕註冊事件處理函式，點選按鈕可以刪除當前連結a父元素的父元素，也就是所在的tr行。

（18）.table.tBodies[0].appendChild(tr);

tr.appendChild(td1);

新增行和td單元格。

二.相關閱讀:

（1）.rows參閱表格table rows集合用法一章節。

（2）.innerHTML參閱innerHTML屬性一章節。

（3）.toLowerCase()參閱JavaScript toLowerCase()一章節。

（4）.cells參閱JavaScript cells用法一章節。

（5）.document.createElement()參閱document.createElement()一章節。

（6）.removeChild()參閱JavaScript removeChild()一章節。

（7）.parentNode參閱parentNode屬性用法一章節。

（8）.appendChild()參閱appendChild()用法一章節。

（9）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

相關文章