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

Version imprimable

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:

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

21/10/2009, 11h33
florentB

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

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:

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:

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>

21/10/2009, 16h22
florentB
Salut (à nouveau ;) )

Citation:

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 :D)

Citation:

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

Code:

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

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

Citation:

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:

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

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.

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

Code:

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:

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:

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

23/10/2009, 10h01
florentB

Salut

Citation:

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.

Citation:

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
23/10/2009, 10h36
dev_newbie

merci beaucoup pour ta reponse FlorentB

ta démarche est celle que je cherche mais je ne sais pas beaucoup comment le faire

tu peux m'envoyer un peu de code qui explique la procedure?
26/10/2009, 14h43
florentB

Re.

Désolé, mais au niveau du code, il va falloir de débrouiller.
Je ne doute pas que tu y arrives maintenant que tu as tous les éléments. :ccool:

merci FlorentB pour ton aide, t'es le seul qui s'est occupé de moi pour ce post :king:

j'ai suivi tes conseils et sa marche à un détail prés: la servlet affiche les données de la base mais lors de la suppression d'un element des exceptions se produisent

je m'explique à travers le code:

Le contexte de l'appli s'appelle ChatSmsJSP
ma servlet s'appelle webadmin et voici son mapping dans le web.xml :
je vais mettre en relief les url pour mieux suivre le deroulement du fonctionnement et cerner l'erreur dont je cherche son origine

Code:

1
2
3
4
5
  
<servlet-mapping> 
        <servlet-name>webadmin</servlet-name>   
      <url-pattern>/display</url-pattern>  
</servlet-mapping>

les données à afficher sot contenues dans la liste profils, celle-ci est bien remplie
[/code]

Code:

1
2
3
4
5
6
7
8
9
10
  public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {
        List<Profil> profils = new ArrayList<Profil>();

        try {
            profils = getAllProfiles();
            request.setAttribute("profils", profils);
            getServletContext().getRequestDispatcher("/bannirMembres.jsp").forward(request, response);
            }

jusque là tout se passe bien

l'affichage se fait dans un formulaire dont voici les propriétés

Code:

1
2
  <form id="form1" action="/ChatSmsJSP/bannirMembres.jsp" method="post" name="frmMembre" >

pour passer l'id du l'ement à supprimer j'utilise ce code

Code:

1
2
3
4
5
 
   function deleteElement(elementId){
                document.form1.idToDelete.value=elementId
                document.form1.submit();
            }

sur chaque ligne du tableau, il y a un bouton qui prend la valeu de l'id à supprimer et excecute la fct precedente

Code:

1
2
3
4
5
6
7
8
 
 <td> <input type="submit" onclick="deleteElement('<%=idToDelete%>');
" value="Bannir"></td>
                        <%
                i++;
                request.setAttribute("idToDelete", idToDelete);
            }
                        %>

on passe l'id dans la requete, j'appelle la methode post

Code:

1
2
3
4
5
6
7
8
9
 
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String param = (String) request.getParameter("idToDelete");
            int idToDelete = Integer.parseInt(param);
            bannirMembre(idToDelete);
 
            doGet(request, response);
        } catch (les exceptions){...}

et c'est là que tout explose:

tomcat me sort une nullpointer exception dont j'ai pas vraiment compris d'où elle vient:?

pourtant, tout me semble correct

voici la trace de l'exception

Code:

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
 
org.apache.jasper.JasperException: An exception occurred processing JSP page /bannirMembres.jsp at line 48
 
45:                     <td align="center" width="80px" style="font-size:larger;font-weight:bold">Selectionner</tr>
46:                     <%
47:             int i = 0;
48:             while (i < profils.size()) {
49:                 Profil profil = profils.get(i);
50:                 int idToDelete = profil.getId();
51:                     %>
 
 
Stacktrace:
	org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:505)
	org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:416)
	org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:342)
	org.apache.jasper.servlet.JspServlet.service(JspServlet.java:267)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)
 
cause mï¿½re
 
java.lang.NullPointerException
	org.apache.jsp.bannirMembres_jsp._jspService(bannirMembres_jsp.java:104)
	org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:374)
	org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:342)
	org.apache.jasper.servlet.JspServlet.service(JspServlet.java:267)
	javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
	org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)

et quand je fais l'action de mon form ainsi:

Code:

1
2
3

  <form id="form1" action="/ChatSmsJSP/display" method="post" name="frmMembre" >

j'obtient une format exception dont sa trace est la suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
java.lang.NumberFormatException: For input string: ""
        at java.lang.NumberFormatException.forInputString(NumberFormatException.java:48)
        at java.lang.Integer.parseInt(Integer.java:470)
        at java.lang.Integer.parseInt(Integer.java:499)
        at control.ChatsmsAdminConsole.doPost(ChatsmsAdminConsole.java:93)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:637)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
        at org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
        at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:845)
        at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
        at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
        at java.lang.Thread.run(Thread.java:619)

des idées sur l'origine de l'exception?
merci pour votre aide

Re.

Ton exception nous parle :D

Citation:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
java.lang.NumberFormatException: For input string: ""
        at java.lang.NumberFormatException.forInputString(NumberFormatException.java:48)
        at java.lang.Integer.parseInt(Integer.java:470)
        at java.lang.Integer.parseInt(Integer.java:499)
        at control.ChatsmsAdminConsole.doPost(ChatsmsAdminConsole.java:93)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:637)
        at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
        at org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:390)
        at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:235)
        at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
        at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
        at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
        at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
        at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
        at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
        at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
        at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:845)
        at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
        at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
        at java.lang.Thread.run(Thread.java:619)

A mon avis, ton identifiant est mal passé à ta servlet, il faudrait :

Que tu regardes le code généré par ta JSP pour voir si l'identifiant est bien passé à ta fonction javascript sur chaque bouton (clic droit sur la page internet => afficher la source)
Que tu mettes un point d'arrêt ou un affichage de la valeur récupérée dans la servlet. (System.out.println("ton message"); affichera un message dans la console).

Petite question : pourquoi fais-tu

Citation:

Code:

request.setAttribute("idToDelete", idToDelete);

Tu l'utilises après ? Sinon, si tu ne l'utilises pas, supprime le, ca pourrait venir de la ... ou pas. Le problème, c'est qu'avec le code dans les JSP, il est assez difficile de trouver la ligne d'erreur :aie:

merci FlorentB pour ton aide
j'ai réussi à résoudre le problème et j'ai récupéré la source de l'erreur:

elle vient de ce code javascript:
Code:

1 2 3 4 5 function deleteElement(elementId){ document.form1.idToDelete.value=elementId document.form1.submit(); }
en fait à la place de
Code:

1 2 3 document.form1.idToDelete.value=elementId document.form1.submit();
Code:

1 2 3 document.getElementById('form1').idToDelete.value=elementId document.getElementById('form1').submit();
et ça marche!!!!

27/10/2009, 15h06
florentB

Cool :ccool:
penses au tag :resolu: :D
30/04/2013, 13h01
cheyma

est ce que il y a une solution sans utiliser javascript!!!
juste jsp et servlet?