JavaScriptでデータを一括削除する方法

ネットワーク技術の継続的な発展により、JavaScript は最新の Web アプリケーション開発に必要な言語の 1 つになりました。 JavaScript は、Web ブラウザ、サーバーサイド、およびモバイル アプリケーションで実行できるオブジェクト指向プログラミング言語です。 Web アプリケーションの開発中に、データを一括して削除する必要がある状況に遭遇することがあります。この記事ではJavaScriptでデータの一括削除を実装する方法を紹介します。

1. 基本的な考え方

まず、データを一括で削除するという基本的な考え方を理解する必要があります。 JavaScript を使用してデータをバッチで削除する場合、通常は次の手順を完了する必要があります:

1. 削除するデータの ID リストを取得する;
2. サーバーにリクエストを送信する最後にサーバーにこれらのデータを削除させます。
3. フロントエンド ページを更新して、削除されたデータを表示します。

今回はJavaScriptを使ってデータを一括削除する方法をこの3つの側面から紹介します。

2. 削除するデータのIDリストを取得する

一括削除を実装する前に、削除するデータを決定する必要があります。一般的に、フロントエンド インターフェイスで削除するデータを選択し、これらのデータの ID を JavaScript 配列に保存できます。 JavaScript では、次のコードを使用して、選択されたデータを取得できます。

// 获取选择框的所有元素  
var checkBoxList = document.getElementsByName("itemId[]");  
var deleteArray = [];  
// 遍历所有的选择框  
for(var i = 0; i < checkBoxList.length; i ++){  
    // 判断选择框是否被选中  
    if(checkBoxList[i].checked == true){  
        // 将选择框的值添加到数组中  
        deleteArray.push(checkBoxList[i].value);  
    }  
}  
// 将数组转换为字符串  
var deleteIds = deleteArray.join(",");

上記のコードでは、最初に document.getElementsByName メソッドを使用して、「itemId[]」という名前のすべての選択ボックス要素を取得します。次に、配列 deleteArray を使用して、選択した ID を保存します。選択ボックスの反復中に、選択ボックスが選択されている場合、その値が deleteArray 配列に追加されます。最後に、join メソッドを使用して、配列をカンマ区切りの文字列 deleteIds に変換します。

3. サーバーにリクエストを送信します

削除するデータの ID リストを取得したら、これらの ID をサーバーに送信する必要があります。サーバー側ではAjax技術を利用して処理することができ、削除されたデータはデータベースから削除されます。 JavaScript では、次のコードを使用してリクエストを送信できます。

var xmlhttp=new XMLHttpRequest();  
xmlhttp.onreadystatechange=function(){  
    if (xmlhttp.readyState==4 && xmlhttp.status==200){  
        // 在前端页面上删除选中的行  
        var trList = document.getElementsByName("trIds[]");  
        for(var i = 0; i < trList.length; i ++){  
            if(trList[i].style.display != "none"){  
                for(var j = 0; j < deleteArray.length; j ++){  
                    if(trList[i].getAttribute("id") == deleteArray[j]){  
                        trList[i].style.display = "none";  
                        break;  
                    }  
                }  
            }  
        }  
    }  
}  
xmlhttp.open("POST","delete.php",true);  
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xmlhttp.send("deleteIds=" + deleteIds);

上記のコードでは、まず XMLHttpRequest オブジェクトを作成し、次にコールバック関数を定義します。コールバック関数では、フロントエンド ページを更新して、削除されたデータを表示できます。

リクエストの送信プロセスで、POST メソッドを使用して、削除する ID のリストを deleteIds パラメーターに保存しました。サーバー側では、$_POST['deleteIds'] を使用してこれらの ID を取得できます。データ削除の具体的な実装では、次のような SQL ステートメントを使用できます。

$deleteIds = $_POST['deleteIds'];  
// 将字符串转换为数组  
$idArray = explode(",", $deleteIds);  
// 构造SQL语句  
$sql = "DELETE FROM table_name WHERE id IN (" . $deleteIds . ")";  
// 执行SQL语句  
mysqli_query($conn, $sql);

4. フロントエンド ページを更新します

最後に、削除されたデータを表示するためにフロントエンド ページを更新する必要があります。データ。リクエストをサーバーに送信した後、選択した行をページから削除して、フロントエンド ページを更新できます。 JavaScript では、次のコードを使用してページを更新できます。

// 在前端页面上删除选中的行  
var trList = document.getElementsByName("trIds[]");  
for(var i = 0; i < trList.length; i ++){  
    if(trList[i].style.display != "none"){  
        for(var j = 0; j < deleteArray.length; j ++){  
            if(trList[i].getAttribute("id") == deleteArray[j]){  
                trList[i].style.display = "none";  
                break;  
            }  
        }  
    }  
}

上記のコードでは、「trIds[]」という名前を持つすべてのテーブル行要素を反復処理します。走査プロセス中に、行の表示属性が none でない場合は、削除する ID リストを再度走査します。ID が現在の行の ID と等しい場合は、行の表示属性を none に設定して削除を実現します。フロントエンドページのこの行の効果。

概要

この記事では、JavaScript でデータの一括削除を実装する方法を紹介します。具体的には、削除対象データのIDリストを取得し、サーバー側にリクエストを送信し、フロントエンドページを更新することで一括削除を実現します。もちろん、実際の開発においては、例外をどのように処理するか、セキュリティ検証をどのように行うかなど、より詳細な検討も必要になります。この記事がお役に立てば幸いです。

以上がJavaScriptでデータを一括削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。