Add, delete, modify and check javascript

With the continuous development of network technology, JavaScript has become an essential skill for Web development. In JavaScript, addition, deletion, modification and search are very basic and important operations. This article will introduce how to use JavaScript to implement the addition, deletion, modification and search function.

Add

In JavaScript, we can use forms to add data. The forms include various data that need to be added and their related attributes. After filling in the data in the form, we need to use JavaScript to send the data to the background for processing and saving. The following is a piece of JavaScript code for adding users:

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));
}

In this code, we first obtain the data filled in by the user from the form through the getElementById method. Then package the data into JSON format and send a request via XMLHttpRequest to the server to add a user. When the request is completed, we will pop up a prompt box to tell the user that the addition was successful.

Delete

In JavaScript, we can select an element and then delete the element from the page through code. This element can be a table row, a record, an image, etc. The following is an example of deleting a table row:

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

The function of this function is to delete a certain table row. We need to pass in the row parameter, which specifies the table row to be deleted. Since the row parameter is an HTML element, we can get its parent node through the parentNode attribute, and then get the parent node of the parent node through parentNode, and finally get the entire table. We use the deleteRow method to delete a row in the table, and the parameter i specifies the number of rows to be deleted.

Change

In JavaScript, we can directly modify the attribute values ​​​​of DOM nodes to achieve data modification. The following is an example of modifying table information:

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>';
}

These two functions are to edit table rows and save modifications. In the operation of editing a table row, we first iterate through all the cells in the table and turn the contents of each cell into a text box so that the user can edit their values. We also changed the name of the button from "Edit" to "Save" to indicate that users can save these changes.

In the operation of saving changes, we traverse all cells in the table, obtain their respective values, and replace the text box with the original value. We also changed the name of the button from "Save" to "Edit" to indicate that users can continue to edit this information.

Find

In JavaScript, we can use arrays and objects to store data, and then implement the search function by traversing these data. The following is an example of finding account balance by name:

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;
  }
}

In this example, we define an accounts array that stores multiple objects. The objects include account name and account balance. By traversing this array, we find the account named "John Doe" and return its account balance.

Conclusion

The above are some simple examples of using JavaScript to implement add, delete, modify and query operations. However, the use of JavaScript is not limited to this, we can also use other tools and frameworks to optimize our code. For example, jQuery can be used to optimize DOM operations, and React can be used to create complex user interfaces. Overall, JavaScript is a very important skill in web development, and mastering it can help us better complete various tasks and projects.

The above is the detailed content of Add, delete, modify and check javascript. For more information, please follow other related articles on the PHP Chinese website!