So verwenden Sie ein JavaScript-Skript zum Ändern von Tabelleninformationen in JSP

In den Backend-Systemen vieler Websites ist es häufig erforderlich, die Funktion zum Ändern von Tabelleninformationen zu nutzen. Wenn Sie die JSP-Technologie verwenden, um den Tabellenänderungsvorgang abzuschließen, können Sie mithilfe von JavaScript-Skripten die Tabelleninformationen schnell und einfach ändern. In diesem Artikel erhalten Sie eine detaillierte Einführung in die spezifischen Schritte der Verwendung von JavaScript-Skripten zum Ändern von Tabelleninformationen in JSP.

1. Anzeige von Tabelleninformationen in JSP

Auf der JSP-Seite können wir den folgenden Code verwenden, um einfache Tabellendaten anzuzeigen:

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

Der obige Code ist ein einfacher JSP-Code, der Daten aus der Datenbank erhält, und die Daten in tabellarischer Form anzeigen. Darunter ist jede Tabellenzeile an eine Schaltfläche zum Bearbeiten und Löschen gebunden. Die Klickereignisse dieser beiden Schaltflächen werden in den folgenden Schritten definiert.

2. JavaScript-Skript zum Implementieren der Bearbeitung von Tabelleninformationen

Wenn der Benutzer auf die Schaltfläche „Bearbeiten“ in der Tabelle klickt, wird die Funktion „editUser()“ im JavaScript-Skript ausgelöst. Wir können der Seite den folgenden JS-Code hinzufügen, um die Definition dieser Funktion zu implementieren:

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

Im obigen Code wird die Funktion editUser() aufgerufen, wenn der Benutzer auf die Schaltfläche „Bearbeiten“ klickt. In dieser Funktion erhalten wir zunächst die Daten der aktuellen Zeilentabelle, einschließlich Benutzername, E-Mail-Adresse und Telefonnummer. Als Nächstes geben wir diese Daten in ein Popup-Bearbeitungsformular ein, das auf der Seite ausgeblendet ist. Schließlich versetzen wir das Bearbeitungsformular in einen Anzeigestatus, damit Benutzer die Daten bearbeiten können.

3. JavaScript-Skript zum Implementieren des Löschens von Tabelleninformationen

Wenn der Benutzer auf die Schaltfläche „Löschen“ in der Tabelle klickt, wird die Funktion „deleteUser()“ im JavaScript-Skript ausgelöst. Wir können der Seite den folgenden JS-Code hinzufügen, um die Definition dieser Funktion zu implementieren:

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

Im obigen Code wird die Funktion deleteUser() aufgerufen, wenn der Benutzer auf die Schaltfläche „Löschen“ klickt. Bei dieser Funktion öffnen wir zunächst ein Bestätigungsfeld, damit der Benutzer bestätigen kann, ob er den Benutzer löschen möchte. Wenn der Benutzer auf die Bestätigungsschaltfläche klickt, senden wir im Hintergrund eine Anfrage zum Löschen der Benutzerinformationen.

4. Verarbeitung der Tabelleninformationsänderung in JSP

Wenn der Benutzer die Daten in der Tabelle ändert, müssen die geänderten Daten in der Datenbank gespeichert werden. Wir können den folgenden JSP-Code verwenden, um Änderungen an Tabellendaten zu verarbeiten:

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

Im obigen Code erhalten wir zunächst die Informationen, die der Benutzer ändern möchte, aus den Anforderungsparametern und rufen dann die Methode updateUser() in userService auf, um die zu aktualisieren Daten in der Datenbank. Abschließend leiten wir die Seite mithilfe der Methode „response.sendRedirect()“ wieder auf die ursprüngliche Seite um.

Zusammenfassend sind oben die detaillierten Schritte für die Verwendung von JavaScript-Skripten zum Ändern von Tabelleninformationen in JSP aufgeführt. Mithilfe von JavaScript-Skripten können wir Tabelleninformationen einfach und schnell ändern und löschen, was dem Backend-Verwaltungssystem der Website mehr Komfort bietet.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein JavaScript-Skript zum Ändern von Tabelleninformationen in JSP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!