자바스크립트 추가, 삭제, 수정 및 확인

네트워크 기술의 지속적인 발전으로 JavaScript는 웹 개발에 필수적인 기술이 되었습니다. JavaScript에서는 추가, 삭제, 수정 및 검색이 매우 기본적이고 중요한 작업입니다. 이 기사에서는 JavaScript를 사용하여 추가, 삭제, 수정 및 검색 기능을 구현하는 방법을 소개합니다.

Add

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를 통해 요청을 보내 서버에 사용자를 추가하라는 요청을 보냅니다. 요청이 완료되면 추가가 성공했음을 사용자에게 알리는 프롬프트 상자가 팝업됩니다.

Delete

JavaScript에서는 요소를 선택한 다음 코드를 통해 페이지에서 해당 요소를 삭제할 수 있습니다. 이 요소는 테이블 행, 레코드, 이미지 등이 될 수 있습니다. 다음은 테이블 행 삭제의 예입니다.

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

이 함수의 기능은 특정 테이블 행을 삭제하는 것입니다. 삭제할 테이블 행을 지정하는 행 매개변수를 전달해야 합니다. 행 매개변수는 HTML 요소이므로 parentNode 속성을 통해 상위 노드를 가져온 다음 parentNode를 통해 상위 노드의 상위 노드를 가져오고 마지막으로 전체 테이블을 가져올 수 있습니다. deleteRow 메소드를 사용하여 테이블의 행을 삭제하고 매개변수 i는 삭제할 행 수를 지정합니다.

Change

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

이 두 함수는 각각 테이블 행을 편집하는 작업과 변경 사항을 저장하는 작업입니다. 테이블 행을 편집하는 작업에서는 먼저 테이블의 모든 셀을 반복하고 사용자가 값을 편집할 수 있도록 각 셀의 내용을 텍스트 상자로 변환합니다. 또한 사용자가 이러한 변경 사항을 저장할 수 있음을 나타내기 위해 버튼 이름을 "편집"에서 "저장"으로 변경했습니다.

변경 사항을 저장하는 작업에서는 테이블의 모든 셀을 순회하여 해당 값을 가져온 다음 텍스트 상자를 원래 값으로 바꿉니다. 또한 사용자가 이 정보를 계속 편집할 수 있음을 나타내기 위해 버튼 이름을 "저장"에서 "편집"으로 변경했습니다.

Find

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

이 예에서는 여러 개체를 저장하는 계정 배열을 정의합니다. 개체에는 계정 이름과 계정 잔액이 포함됩니다. 이 배열을 탐색하여 "John Doe"라는 계정을 찾고 해당 계정 잔액을 반환합니다.

결론

위는 JavaScript를 사용하여 추가, 삭제, 수정 및 검색 작업을 구현하는 몇 가지 간단한 예입니다. 그러나 JavaScript의 사용은 이에 국한되지 않고 다른 도구와 프레임워크를 사용하여 코드를 최적화할 수도 있습니다. 예를 들어 jQuery를 사용하여 DOM 작업을 최적화할 수 있고 React를 사용하여 복잡한 사용자 인터페이스를 만들 수 있습니다. 전반적으로 JavaScript는 웹 개발에서 매우 중요한 기술이며, 이를 익히면 다양한 작업과 프로젝트를 더 잘 완료하는 데 도움이 될 수 있습니다.

위 내용은 자바스크립트 추가, 삭제, 수정 및 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!