增刪改查javascript

隨著網路技術不斷發展，JavaScript成為了Web開發的必備技能。在JavaScript中，增刪改查是非常基礎且重要的操作，本文將介紹如何使用JavaScript實作增刪改查功能。

增加

在JavaScript中，我們可以使用表單來實現資料的增加，表單中包含了需要新增的各種資料及其相關屬性。在表單中填寫完資料後，我們需要使用JavaScript將資料傳送到背景處理並儲存。以下是一段用來新增使用者的JavaScript程式碼：

function addUser() {
  //获取表单数据
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  var gender = document.getElementById('gender').value;
  var telephone = document.getElementById('telephone').value;

  //将数据打包成JSON格式
  var user = {
    "name": name,
    "age": age,
    "gender": gender,
    "telephone": telephone
  };

  //发送请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/addUser', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert('添加成功');
    }
  }
  xhr.send(JSON.stringify(user));
}

這段程式碼中，我們先透過getElementById方法從表單中取得使用者填寫的資料。然後將資料打包成JSON格式，並透過XMLHttpRequest發送請求，向伺服器發送新增使用者的請求。當請求完成後，我們會彈出一個提示框，告訴使用者新增成功。

刪除

在JavaScript中，我們可以透過選取某個元素，再透過程式碼將該元素從頁面中刪除。這個元素可以是一個表格行、一筆記錄或一個圖片等等。下面是一個刪除表格行的範例：

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
}

這個函數的作用是刪除某個表格行，我們需要傳入row這個參數，它指定了要刪除的表格行。由於row參數是HTML元素，我們可以透過parentNode屬性取得到其父節點，再透過parentNode再取得到父節點的父節點，最終取得到整個表格。我們使用deleteRow方法來刪除表格中的某一行，參數i指定了要刪除的行數。

改變

在JavaScript中，我們可以直接修改DOM節點的屬性值，從而實現資料的修改。以下是一個修改表格資訊的範例：

function editRow(row) {
  for (var i = 0; i < row.parentNode.parentNode.cells.length; i++) {
    var cell = row.parentNode.parentNode.cells[i];
    if (cell.innerHTML != '<button onclick="editRow(this.parentNode.parentNode)">Edit</button>') {
      cell.innerHTML = '<input type="text" value="' + cell.innerHTML + '">';
    }
  }
  row.innerHTML = '<button onclick="updateRow(this.parentNode.parentNode)">Save</button>';
}

function updateRow(row) {
  for (var i = 0; i < row.cells.length; i++) {
    row.cells[i].innerHTML = row.cells[i].childNodes[0].value;
  }
  row.innerHTML = '<button onclick="editRow(this.parentNode)">Edit</button>';
}

這兩個函數分別是編輯表格行和儲存修改的操作。在編輯表格行的操作中，我們首先遍歷表格中的所有儲存格，將每個儲存格的內容變成一個文字框，以便使用者可以編輯它們的值。我們還將按鈕的名稱由“Edit”變成“Save”，表明使用者可以儲存這些修改。

在儲存修改的操作中，我們遍歷表格中的所有儲存格，取得它們各自的值，並將文字方塊換成原來的值。我們還將按鈕的名稱由“Save”變成“Edit”，表明使用者可以繼續編輯這些資訊。

尋找

在JavaScript中，我們可以使用陣列和物件來儲存數據，然後透過遍歷這些數據來實現查找功能。下面是一個透過姓名來找出帳戶餘額的範例：

var accounts = [
  {"name": "张三", "balance": 10000},
  {"name": "李四", "balance": 20000},
  {"name": "王五", "balance": 30000},
];

for (var i = 0; i < accounts.length; i++) {
  if (accounts[i].name == '李四') {
    alert('李四的账户余额为：' + accounts[i].balance);
    break;
  }
}

在這個範例中，我們定義了一個accounts數組，其中儲存了多個物件。對象包括了帳戶姓名和帳戶餘額。我們透過遍歷這個數組，找到姓名為「李四」的帳戶，並返回它的帳戶餘額。

結論

以上是一些簡單的使用JavaScript實作增刪改查操作的範例。但是，JavaScript的使用不僅限於此，我們還可以利用其它工具和框架來優化我們的程式碼。例如，使用jQuery可以最佳化DOM操作，使用React可以建立複雜的使用者介面。總的來說，在Web開發中，JavaScript是一項非常重要的技能，熟練它可以幫助我們更好地完成各種任務和專案。

以上是增刪改查javascript的詳細內容。更多資訊請關注PHP中文網其他相關文章！