Comment utiliser un script JavaScript pour modifier les informations d'une table dans JSP

Dans les systèmes backend de nombreux sites Web, il est souvent nécessaire d'utiliser la fonction de modification des informations des tableaux. Lorsque vous utilisez la technologie JSP pour terminer l'opération de modification de la table, l'utilisation de scripts JavaScript peut modifier rapidement et facilement les informations de la table. Cet article vous donnera une introduction détaillée aux étapes spécifiques de l'utilisation de scripts JavaScript pour modifier les informations des tables dans JSP.

1. Affichage des informations du tableau dans JSP

Dans la page JSP, nous pouvons utiliser le code suivant pour afficher les données d'un tableau simple :

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

Le code ci-dessus est un simple code JSP qui obtiendra les données de la base de données, et afficher les données sous forme de tableau. Parmi eux, chaque ligne du tableau est liée à un bouton d'édition et de suppression. Les événements de clic de ces deux boutons seront définis dans les étapes suivantes.

2. Script JavaScript pour implémenter l'édition des informations du tableau

Lorsque l'utilisateur clique sur le bouton d'édition dans le tableau, la fonction editUser() dans le script JavaScript sera déclenchée. Nous pouvons ajouter le code JS suivant à la page pour implémenter la définition de cette fonction :

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

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton d'édition, la fonction editUser() sera appelée. Dans cette fonction, nous obtenons d'abord les données de la table de lignes actuelle, notamment le nom d'utilisateur, l'adresse e-mail et le numéro de téléphone. Ensuite, nous remplissons ces données dans un formulaire de modification contextuel, masqué sur la page. Enfin, nous définissons le formulaire de modification sur un état d'affichage afin que les utilisateurs puissent modifier les données.

3. Script JavaScript pour implémenter la suppression des informations du tableau

Lorsque l'utilisateur clique sur le bouton Supprimer dans le tableau, la fonction deleteUser() dans le script JavaScript sera déclenchée. Nous pouvons ajouter le code JS suivant à la page pour implémenter la définition de cette fonction :

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

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton Supprimer, la fonction deleteUser() sera appelée. Dans cette fonction, nous faisons d'abord apparaître une boîte de confirmation pour demander à l'utilisateur de confirmer s'il souhaite supprimer l'utilisateur. Si l'utilisateur clique sur le bouton de confirmation, nous envoyons une demande en arrière-plan pour supprimer les informations de l'utilisateur.

4. Traitement de la modification des informations de la table dans JSP

Lorsque l'utilisateur modifie les données de la table, les données modifiées doivent être enregistrées dans la base de données. Nous pouvons utiliser le code JSP suivant pour traiter les modifications des données de la table :

<%
    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");
%>

Dans le code ci-dessus, nous obtenons d'abord les informations que l'utilisateur souhaite modifier à partir des paramètres de la requête, puis appelons la méthode updateUser() dans userService pour mettre à jour le données dans la base de données. Enfin, nous redirigeons la page vers la page d'origine via la méthode Response.sendRedirect().

En résumé, voici les étapes détaillées d'utilisation de scripts JavaScript pour modifier les informations des tables dans JSP. En utilisant des scripts JavaScript, nous pouvons modifier et supprimer rapidement et facilement les informations des tableaux, ce qui facilite le fonctionnement du système de gestion backend du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!