JavaScript 스크립트를 사용하여 JSP에서 테이블 정보를 수정하는 방법

많은 웹사이트의 백엔드 시스템에서는 테이블 정보를 수정하는 기능을 사용해야 하는 경우가 많습니다. JSP 기술을 사용하여 테이블 수정 작업을 완료할 때 JavaScript 스크립트를 사용하면 테이블 정보를 빠르고 쉽게 수정할 수 있습니다. 이 기사에서는 JSP에서 테이블 정보를 수정하기 위해 JavaScript 스크립트를 사용하는 특정 단계에 대해 자세히 소개합니다.

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. 테이블 정보 편집을 구현하는 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");
%>

위 코드에서는 먼저 요청 매개변수에서 사용자가 수정하려는 정보를 얻은 다음 userService에서 updateUser() 메서드를 호출하여 업데이트합니다. 데이터베이스의 데이터. 마지막으로 response.sendRedirect() 메소드를 통해 페이지를 원래 페이지로 다시 리디렉션합니다.

요약하자면, 위의 내용은 JavaScript 스크립트를 사용하여 JSP에서 테이블 정보를 수정하는 세부 단계입니다. JavaScript 스크립트를 이용하여 테이블 정보를 쉽고 빠르게 수정, 삭제할 수 있어 웹사이트의 백엔드 관리 시스템에 편의성을 제공합니다.

위 내용은 JavaScript 스크립트를 사용하여 JSP에서 테이블 정보를 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!