Cara menggunakan skrip JavaScript untuk mengubah suai maklumat jadual dalam JSP

Dalam sistem bahagian belakang banyak tapak web, selalunya perlu menggunakan fungsi mengubah suai maklumat jadual. Apabila menggunakan teknologi JSP untuk melengkapkan operasi pengubahsuaian jadual, menggunakan skrip JavaScript boleh mengubah suai maklumat jadual dengan cepat dan mudah. Artikel ini akan memberi anda pengenalan terperinci kepada langkah khusus menggunakan skrip JavaScript untuk mengubah suai maklumat jadual dalam JSP.

1. Paparan maklumat jadual dalam JSP

Dalam halaman JSP, kita boleh menggunakan kod berikut untuk memaparkan data jadual ringkas:

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

Kod di atas Ia adalah kod JSP mudah yang akan mendapatkan data daripada pangkalan data dan memaparkan data dalam bentuk jadual. Antaranya, setiap baris jadual terikat pada butang edit dan padam Acara klik kedua-dua butang ini akan ditakrifkan dalam langkah seterusnya.

2. Skrip JavaScript untuk melaksanakan pengeditan maklumat jadual

Apabila pengguna mengklik butang edit dalam jadual, fungsi editUser() dalam skrip JavaScript akan dicetuskan. Kita boleh menambah kod JS berikut pada halaman untuk melaksanakan definisi fungsi ini:

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

Dalam kod di atas, apabila pengguna mengklik butang edit, fungsi editUser() akan dipanggil. Dalam fungsi ini, kami mula-mula mendapatkan data jadual baris semasa, termasuk nama pengguna, alamat e-mel dan nombor telefon. Seterusnya, kami mengisi data ini ke dalam borang edit pop timbul, yang tersembunyi pada halaman. Akhir sekali, kami menetapkan borang edit kepada keadaan paparan supaya pengguna boleh mengedit data.

3. Skrip JavaScript untuk melaksanakan pemadaman maklumat jadual

Apabila pengguna mengklik butang padam dalam jadual, fungsi deleteUser() dalam skrip JavaScript akan dicetuskan. Kita boleh menambah kod JS berikut pada halaman untuk melaksanakan definisi fungsi ini:

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

Dalam kod di atas, apabila pengguna mengklik butang padam, fungsi deleteUser() akan dipanggil. Dalam fungsi ini, kami mula-mula muncul kotak pengesahan untuk membenarkan pengguna mengesahkan sama ada mereka mahu memadamkan pengguna. Jika pengguna mengklik butang pengesahan, maka kami menghantar permintaan ke latar belakang untuk memadam maklumat pengguna.

4. Memproses pengubahsuaian maklumat jadual dalam JSP

Apabila pengguna mengubah suai data dalam jadual, data yang diubah suai perlu disimpan ke pangkalan data. Kami boleh menggunakan kod JSP berikut untuk memproses pengubahsuaian data jadual:

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

Dalam kod di atas, kami mula-mula mendapatkan maklumat yang pengguna ingin ubah suai daripada parameter permintaan, dan kemudian panggil updateUser() kaedah dalam UserService Kemas kini data dalam pangkalan data. Akhir sekali, kami mengubah hala halaman kembali ke halaman asal melalui kaedah response.sendRedirect().

Ringkasnya, perkara di atas ialah langkah terperinci untuk menggunakan skrip JavaScript untuk mengubah suai maklumat jadual dalam JSP. Dengan menggunakan skrip JavaScript, kami boleh mengubah suai dan memadam maklumat jadual dengan mudah dan cepat, memberikan kemudahan untuk sistem pengurusan bahagian belakang tapak web.

Atas ialah kandungan terperinci Cara menggunakan skrip JavaScript untuk mengubah suai maklumat jadual dalam JSP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!