JavaScriptの追加、削除、変更、チェック-フロントエンドQ&A-php.cn

JavaScriptの追加、削除、変更、チェック

WBOY

リリース： 2023-05-17 16:39:37

オリジナル

853 人が閲覧しました

ネットワーク技術の継続的な発展により、JavaScript は Web 開発に不可欠なスキルになりました。 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 経由でサーバーにリクエストを送信し、ユーザーを追加します。リクエストが完了すると、プロンプトボックスがポップアップ表示され、追加が成功したことがユーザーに通知されます。

削除

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

ログイン後にコピー

これら 2 つの関数は、テーブルの行を編集し、変更を保存することです。テーブルの行を編集する操作では、最初にテーブル内のすべてのセルを反復処理し、各セルの内容をテキストボックスに変換して、ユーザーが値を編集できるようにします。また、ユーザーが変更を保存できることを示すために、ボタンの名前を「編集」から「保存」に変更しました。

変更を保存する操作では、テーブル内のすべてのセルを走査し、それぞれの値を取得し、テキストボックスを元の値に置き換えます。また、ユーザーが引き続きこの情報を編集できることを示すために、ボタンの名前を「保存」から「編集」に変更しました。

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

ログイン後にコピー

この例では、複数のオブジェクトを格納する accounts 配列を定義します。オブジェクトには、口座名と口座残高が含まれます。この配列を走査すると、「John Doe」という名前の口座が見つかり、その口座残高が返されます。

結論

上記は、JavaScript を使用して追加、削除、変更、クエリ操作を実装する簡単な例です。ただし、JavaScript の使用はこれに限定されず、他のツールやフレームワークを使用してコードを最適化することもできます。たとえば、jQuery を使用して DOM 操作を最適化したり、React を使用して複雑なユーザーインターフェイスを作成したりできます。全体として、JavaScript は Web 開発において非常に重要なスキルであり、これを習得することは、さまざまなタスクやプロジェクトをより効率的に完了するのに役立ちます。

以上がJavaScriptの追加、削除、変更、チェックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。