Tambah, padam, ubah suai dan semak javascript

Dengan pembangunan berterusan teknologi rangkaian, JavaScript telah menjadi kemahiran penting untuk pembangunan web. Dalam JavaScript, penambahan, pemadaman, pengubahsuaian dan carian adalah operasi yang sangat asas dan penting Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan carian.

Tambah

Dalam JavaScript, kami boleh menggunakan borang untuk menambah data Borang tersebut termasuk pelbagai data yang perlu ditambah dan atribut berkaitannya. Selepas mengisi data dalam borang, kita perlu menggunakan JavaScript untuk menghantar data ke latar belakang untuk diproses dan disimpan. Berikut ialah sekeping kod JavaScript untuk menambah pengguna:

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

Dalam kod ini, kami mula-mula mendapatkan data yang diisi oleh pengguna daripada borang melalui kaedah getElementById. Kemudian bungkus data ke dalam format JSON dan hantar permintaan melalui XMLHttpRequest ke pelayan untuk menambah pengguna. Apabila permintaan selesai, kami akan muncul kotak gesaan untuk memberitahu pengguna bahawa penambahan itu berjaya.

Padam

Dalam JavaScript, kita boleh memilih elemen dan kemudian memadamkan elemen daripada halaman melalui kod. Elemen ini boleh menjadi baris jadual, rekod, imej, dsb. Berikut ialah contoh pemadaman baris jadual:

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

Fungsi fungsi ini adalah untuk memadam baris jadual tertentu Kita perlu lulus dalam parameter baris, yang menentukan baris jadual untuk dipadamkan. Memandangkan parameter baris ialah elemen HTML, kita boleh mendapatkan nod induknya melalui atribut parentNode, dan kemudian mendapatkan nod induk nod induk melalui parentNode, dan akhirnya mendapatkan keseluruhan jadual. Kami menggunakan kaedah deleteRow untuk memadamkan baris dalam jadual, dan parameter i menentukan bilangan baris yang akan dipadamkan.

Tukar

Dalam JavaScript, kami boleh mengubah suai secara langsung nilai atribut nod DOM untuk mencapai pengubahsuaian data. Berikut ialah contoh mengubah suai maklumat jadual:

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

Kedua-dua fungsi ini adalah untuk mengedit baris jadual dan menyimpan pengubahsuaian masing-masing. Dalam operasi menyunting baris jadual, kami mula-mula melelakan semua sel dalam jadual dan menukar kandungan setiap sel menjadi kotak teks supaya pengguna boleh mengedit nilai mereka. Kami juga menukar nama butang daripada "Edit" kepada "Simpan" untuk menunjukkan bahawa pengguna boleh menyimpan perubahan ini.

Dalam operasi menyimpan perubahan, kami melintasi semua sel dalam jadual, mendapatkan nilai masing-masing dan menggantikan kotak teks dengan nilai asal. Kami juga menukar nama butang daripada "Simpan" kepada "Edit" untuk menunjukkan bahawa pengguna boleh terus mengedit maklumat ini.

Cari

Dalam JavaScript, kita boleh menggunakan tatasusunan dan objek untuk menyimpan data, dan kemudian melintasi data untuk melaksanakan fungsi carian. Berikut ialah contoh mencari baki akaun mengikut nama:

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

Dalam contoh ini, kami mentakrifkan tatasusunan akaun yang menyimpan berbilang objek. Objek termasuk nama akaun dan baki akaun. Dengan merentasi tatasusunan ini, kami mencari akaun bernama "John Doe" dan mengembalikan baki akaunnya.

Kesimpulan

Di atas ialah beberapa contoh mudah menggunakan JavaScript untuk melaksanakan operasi tambah, padam, ubah suai dan semak. Walau bagaimanapun, penggunaan JavaScript tidak terhad kepada ini, kami juga boleh menggunakan alat dan rangka kerja lain untuk mengoptimumkan kod kami. Sebagai contoh, jQuery boleh digunakan untuk mengoptimumkan operasi DOM, dan React boleh digunakan untuk mencipta antara muka pengguna yang kompleks. Secara keseluruhan, JavaScript ialah kemahiran yang sangat penting dalam pembangunan web, dan menguasainya boleh membantu kami menyelesaikan pelbagai tugas dan projek dengan lebih baik.

Atas ialah kandungan terperinci Tambah, padam, ubah suai dan semak javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!