JavaScript スクリプトを使用して JSP のテーブル情報を変更する方法-フロントエンドQ&A-php.cn

JavaScript スクリプトを使用して JSP のテーブル情報を変更する方法

PHPz

リリース： 2023-04-25 10:16:59

オリジナル

1429 人が閲覧しました

多くの Web サイトのバックエンドシステムでは、テーブル情報を変更する機能を使用する必要があることがよくあります。 JSP テクノロジを使用してテーブル変更操作を完了する場合、JavaScript スクリプトを使用すると、テーブル情報を迅速かつ簡単に変更できます。この記事では、JavaScript スクリプトを使用して JSP のテーブル情報を変更する具体的な手順を詳しく紹介します。

1. JSP でのテーブル情報の表示

JSP ページでは、次のコードを使用して単純なテーブルデータを表示できます:

<table>
    <thead>
        <tr>
            <th>用户名</th>
            <th>邮箱</th>
            <th>电话号码</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <%
            //从数据库中获取表格数据
            List<User> userList = userService.getAllUser();
            for(User user:userList){
        %>
        <tr>
            <td><%=user.getName()%></td>
            <td><%=user.getEmail()%></td>
            <td><%=user.getPhone()%></td>
            <td>
                <button onclick="editUser(<%=user.getId()%>)">编辑</button>
                <button onclick="deleteUser(<%=user.getId()%>)">删除</button>
            </td>
        </tr>
        <%}%>
    </tbody>
</table>

ログイン後にコピー

上記のコードはセクションシンプルな JSP コード。データベースからデータを取得し、テーブル形式でデータを表示します。このうち、テーブルの各行は編集ボタンと削除ボタンにバインドされており、これら 2 つのボタンのクリックイベントは後続の手順で定義します。

2. テーブル情報の編集を実装する JavaScript スクリプト

ユーザーがテーブルの編集ボタンをクリックすると、JavaScript スクリプトの editUser() 関数がトリガーされます。次の JS コードをページに追加して、この関数の定義を実装できます。

function editUser(userId){
    //获取该行表格的数据
    var tr = document.getElementById(userId).parentNode.parentNode;
    var name = tr.childNodes[0].textContent;
    var email = tr.childNodes[1].textContent;
    var phone = tr.childNodes[2].textContent;

    //将该行表格的数据填充到弹出的编辑表单中
    document.getElementById("edit-user-id").value = userId;
    document.getElementById("edit-user-name").value = name;
    document.getElementById("edit-user-email").value = email;
    document.getElementById("edit-user-phone").value = phone;

    //显示编辑表单
    document.getElementById("edit-user-form").style.display = "block";
}

ログイン後にコピー

上記のコードでは、ユーザーが編集ボタンをクリックすると、editUser() 関数が呼び出されます。この関数では、まずユーザー名、電子メールアドレス、電話番号などの現在の行テーブルのデータを取得します。次に、ページ上に非表示になっているポップアップ編集フォームにこのデータを入力します。最後に、ユーザーがデータを編集できるように、編集フォームを表示状態に設定します。

3. テーブル情報の削除を実装する JavaScript スクリプト

ユーザーがテーブルの削除ボタンをクリックすると、JavaScript スクリプトの deleteUser() 関数がトリガーされます。次の JS コードをページに追加して、この関数の定義を実装できます。

function deleteUser(userId){
    if(confirm("确认要删除该用户吗？")){
        //向后台发送删除请求
        window.location.href = "deleteUser.jsp?id=" + userId;
    }
}

ログイン後にコピー

上記のコードでは、ユーザーが削除ボタンをクリックすると、deleteUser() 関数が呼び出されます。この関数では、最初に確認ボックスをポップアップ表示して、ユーザーにユーザーを削除するかどうかを確認させます。ユーザーが確認ボタンをクリックすると、ユーザーの情報を削除するリクエストがバックグラウンドで送信されます。

4. JSPにおけるテーブル情報変更処理

ユーザがテーブルのデータを変更した場合、変更したデータをデータベースに保存する必要があります。次の JSP コードを使用して、テーブルデータの変更を処理できます。

<%
    int userId = Integer.parseInt(request.getParameter("userId"));
    String name = request.getParameter("name");
    String email = request.getParameter("email");
    String phone = request.getParameter("phone");

    userService.updateUser(userId, name, email, phone);

    //跳转回原来的页面
    response.sendRedirect("userList.jsp");
%>

ログイン後にコピー

上記のコードでは、まずユーザーが変更したい情報をリクエストパラメーターから取得し、次に updateUser() メソッドを呼び出します。 userService でデータベースを更新します。最後に、response.sendRedirect() メソッドを通じてページを元のページにリダイレクトします。

要約すると、上記は JavaScript スクリプトを使用して JSP のテーブル情報を変更する詳細な手順です。 JavaScript スクリプトを使用すると、テーブル情報を迅速かつ簡単に変更および削除でき、Web サイトのバックエンド管理システムに利便性を提供します。

以上がJavaScript スクリプトを使用して JSP のテーブル情報を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。