Supprimer une ligne d'une table html dans une page jsp

**dev_newbie** · 19/10/2009, 20h03

Salut tout le monde.

je voudrais savoir comment je peux supprimer une ligne dans un tableau html contenu dans une page jsp?
sachant que ce bouton est généré dynamiquement par un code java à l'interieur de la page jsp

voici le code en question:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%@page contentType="text/html" pageEncoding="UTF-8" import="java.util.*,control.Profil"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%
// on récupère les données nom, age et urlRetour nécessaire à l'affichage de la page
            List<Profil> profils = (List<Profil>) request.getAttribute("profils");
%>
<html>
    <head>

        <title>Lister Les membres du chat sms</title>
    </head>
    <body>
        <form action="" method="post" name="frmPersonne">
            <h2 align="center">Liste des membres inscrits au chat sms</h2>

            <table align="center" border="1"style="border-color:red;border-style:solid;width:auto;top:100px;">
                <tr>
                    <td>pseudo</td>
                    <td>num_tel</td>
                    <td>sexe</td>
                    <td>age</td>
                    <td>hobby</td>
                    <td>salon</td>
                    <td>date</td>
                    <td>Action</tr>
                    <%
            for (int i = 0; i < profils.size(); i++) {
                Profil profil = profils.get(i);
                out.println("<tr>" + "<td>" + profil.getPseudo() + "</td>" + "<td>" + profil.getNumTel() + "</td>" + "<td>" + profil.getSexe() + "</td>" + "<td>" + profil.getAge() + "</td>" + "<td>" + profil.getHobby() + "</td>" + "<td>" + profil.getSalon() + "</td>" + "<td>" + profil.getInsDate() + "</td>" + "<td>" + "<input type= button value=Supprimer>" + "</tr>");

            }

                    %>

            </table>
            <br>
        </form>
      
    </body>
</html>

je voudrais savoir si ce que j'ai fait est une bonne méthode pour faire la suppression ou existe-il une meilleure façon de le faire

merci pour votre aide

**florentB** · 21/10/2009, 12h33

salut.

Première remarque : je suis pas fan du code dans les pages JSP.
Utilises de préférence des taglib (comme displaytable dans ton cas).

Sinon pour la suppression tu as plusieurs choix :
- par aller-retour serveur [submit du formulaire] (plus long)
- par javascript [suppression de l'élément graphique et validation des modifications par clic bouton]

Tout dépend de la manière dont tu le vois et de ce que ça doit faire.
Tu veux pouvoir supprimer une seule ligne d'un coup ou plusieurs ?
Tu veux que ce soit instantané ou que l'utilisateur clique sur un bouton pour valider ?

ou alors tu as l'option ajax qui me paraît pas mal dans ton cas ...

**dev_newbie** · 21/10/2009, 13h17

merci FlorentB pour ta réponse

Pour la remarque sur l'utilisation du code java dans l page jsp, t'as entierement raison, ce n'est pas propore et c'est difficile à maintenir
sauf que je suis nouveau en jsp et je ne sais pas comment trop faire

le taglib displaytable que tu as mentionné existe dans struts? (corrigez moi si j'ai tort). moi j'utilise uniquement jsp sans ajouter un autre framewrok

j'étais pas trés clair dans mon dernier message donc je m'explique un peu plus:
j'ai une table html que je la génere dynamiquement dans une page jsp. chaque ligne de la table contient les informations d'un element appelé profil lui meme element d'une liste profils.

je voudrais supprimer une ligne de cette table et que la suppression s'effectue visuellement sur la table et aussi sur la liste profils.

j'ai réussi à supprimer via javascript un élement de la table en utilisant le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
        <script type="text/javascript" >
            function delRow()
            {
                var row = document.getElementById('tr1');
                row.parentNode.removeChild(row);
            }
        </script>

mais j'ai eu 2 problemes:
1-la suppression s'effectue seulement sur le permier element de la table et non sur la ligne courante
2-comment je fais pour supprimer (par un clique de bouton ) un element de la liste et réafficher la nouvelle liste dans la page courante?

pour ajax je ne sais pas trop comment le faire. alors si vous avez un exemple ça serait mieux

voici le code de ma jsp:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
<%@page contentType="text/html" pageEncoding="UTF-8" import="java.util.*, control.*" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%
       List<Profil> profils = (List<Profil>) request.getAttribute("profils");
%>
<html>
    <head>
        <script type="text/javascript" >
            function delRow()
            {
                var row = document.getElementById('tr1');
                row.parentNode.removeChild(row);
            }
        </script>
        <title>Lister Les membres du chat sms</title>
    </head>
    <body>
        <form action="" method="post" name="frmPersonne">
            <h2 align="center">Liste des membres inscrits au chat sms</h2>
            <table id="table1" >
                <tr >
                    <td > Pseudo</td>
                    <td >Telephone</td>
                    <td >Sexe</td>
                    <td >Age</td>
                    <td >Centre d'interet</td>
                    <td >Salon</td>
                    <td >Date d'inscription</td>
                <%
            int i = 0;
            while (i < profils.size()) {
                Profil profil = profils.get(i);%>
                <tr id="tr1">
                    <td >
                        <% out.println(profil.getPseudo());%>
                    </td>
                    <td>
                        <% out.println(profil.getNumTel());%>
                    </td>
                    <td>
                        <% out.println(profil.getSexe());%>
                    </td>
                    <td>
                        <% out.println(profil.getAge());%>
                    </td>
                    <td>
                        <% out.println(profil.getHobby());%>
                    </td>
                    <td>
                        <% out.println(profil.getSalon());%>
                    </td>
 
                    <td>
                        <% out.println(profil.getInsDate());%>
                    </td>
                    <td> 
<input type="button" class="Button" onclick="javascript:delRow()" value="Bannir">
                        <%
                i++;
            }%>
 
            </table>
 
            <br>
}%>
        </form>
 
    </body>
</html>

**florentB** · 21/10/2009, 17h22

Salut (à nouveau

)

le taglib displaytable que tu as mentionné existe dans struts? (corrigez moi si j'ai tort). moi j'utilise uniquement jsp sans ajouter un autre framewrok

Le displaytable fonctionne parfaitement avec struts (qui est un framework

)

1-la suppression s'effectue seulement sur le premier element de la table et non sur la ligne courante

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr id="tr1">

Dans ta boucle tu défini que ton identifiant est toujours "tr1". Mets ton incrément i à la place de 1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr id="tr<%= i %>">

2-comment je fais pour supprimer (par un clique de bouton ) un element de la liste et réafficher la nouvelle liste dans la page courante?

Du coup, vu ce que tu me dis, il me semble qu'un aller-retour serveur est le plus approprié.
Dans le onclick de ton bouton tu ajoutes une action javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"<input type= button value="Supprimer" onclick="tonAction(<%=i%>)"/>"

Il faudrait que indiques ton incrément, mais je sais plus si <%= i %> passe dans les appels javascript.
Ensuite dans ton javascript tu fais un truc du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function tonAction(increment) {
  document.getElementById("idToSuppress").value = increment;
  document.forms[0].action="tonActionQuiSupprime.do";
  document.forms[0].submit();
}

Le champ idToSuppress doit etre déclaré dans ton form.
Tu appelles ici l'action qui va supprimer l'élément de ta liste.
A la fin de l'action tu rediriges vers la JSP. Vu que ta liste aura été délesté de l'élément désiré, il n'apparaitra plus.

**dev_newbie** · 21/10/2009, 18h12

merci florentB pour ta réponse
j'ai trouvé la solution à mon problème en faisant ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 function removeRow(src)
            {
 
                var Row = src.parentElement.parentElement;
                document.all("table1").deleteRow(Row.rowIndex);
            }

dans la jsp je fais ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 <table id="table1" >
 <td> <input type="button" onclick="removeRow(this);" value="Supprimer"></td>

et sa fonctionne!!

cependant sa marche bien sur ie mais pas sur firefox!!

la suppression s'effectue visuellement c-à-d la ligne dans laquelle se trouve le bouton "supprimer" est suppriméemais quand je recharge la page,
la table se remplit de nouveau et c'est normal puisque la liste n'est pas modifiée.

j'ai une servlet qui contient une méthode de suppression d'un enregistrement de la bd qui s'appelle deleteProfil()
voici son code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
package control;
 
import  ...
 
public class MaServlet extends HttpServlet {
 
 
    String userName = null;
    String userPassword = null;
    String connectionURI = null;
    private static Connection dbcon; 
 
        public static void deleteProfil(int id) throws SQLException {
        Statement statement = null;
        ResultSet resultSet = null;
        String query = "delete FROM profil where id= '" + id + "'";
 
        try {
            statement = dbcon.createStatement();
            resultSet = statement.executeQuery(query);
            dbcon.commit();
            resultSet.close();
            statement.close();
               } catch (SQLException sqle) {
            sqle.printStackTrace();
            dbcon.rollback();
        }
           }
}
 
    public void init(ServletConfig config) throws ServletException {
 
        try {
            super.init(config);
            userName = config.getInitParameter("userName");
            userPassword = config.getInitParameter("userPassword");
            connectionURI = config.getInitParameter("connectionURI");
            Class Driver = Class.forName("org.postgresql.Driver");
            dbcon = DriverManager.getConnection(connectionURI, userName,
                    userPassword);
        } catch (ClassNotFoundException ex) {
            System.err.println("ClassNotFoundException: " + ex.getMessage());
            throw new ServletException("Class not found Error");
        } catch (SQLException ex) {
            System.err.println("SQLException: " + ex.getMessage());
        }
    }
 
 
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {
        List<Profil> profils = new ArrayList<Profil>();
 
        try {
            profils = getAllProfiles();
            request.setAttribute("profils", profils);
            ServletContext context = getServletContext();
            RequestDispatcher dispatcher = context.getRequestDispatcher("/DataAccess.jsp");
            dispatcher.forward(request, response);
        } catch (ServletException servletException) {
            servletException.printStackTrace();
        } catch (IOException iOException) {
            iOException.printStackTrace();
        }
    }

je voudrais appeler la méthode deleteProfil dans ma jsp pour que la suppression s'effectue aussi sur la base et non seulement au niveau graphique.

des idées pour le faire??

merci d'avance

**florentB** · 23/10/2009, 11h01

Salut

cependant sa marche bien sur ie mais pas sur firefox!!

Pour les pb de js sous firefox, je te recommande vivement d'utiliser le plugin firebug. Il te permet de faire du pas à pas dans le javascript.

je voudrais appeler la méthode deleteProfil dans ma jsp pour que la suppression s'effectue aussi sur la base et non seulement au niveau graphique.

Il faut reprendre mon post précedent pour ca. N'appelles pas la méthode dans la jsp mais dans ton action ou servlet.
1. passer l'identifiant au javascript
2. le mettre dans un champ du formulaire
3. submit du formulaire
3. récupération de l'identifiant dans la servlet / action
4. appel de la méthode de suppression
5. rappel de la méthode d'affichage / affichagede la jsp

Supprimer une ligne d'une table html dans une page jsp

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager