Discussion :

[pierrot10]

Bonjour à tous,

Je viens de véifier une site sur W3C.

J'ai une table avec un 20ène de lignes. Chaque ligne correspond a ue information sur un échantillon. Et sur chaque ligne j'ai un bouton submit, pour modifier l'information de l'échantillon.

J'ai donc un formulaie par ligne. Ca ressemble a ceci:

Code HTML :

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
73
74
75
 
<table id="listLables" class="table">
  <thead>
    <tr>
      <th>id_label</th>
        <th>Glacier</th>
        <th>Location</th>
        <th>Type</th>
        <th>Replica</th>
        <th>Box</th>
        <th>is in</th>
        <th>is out</th>
        <th>is analized</th>
        <th>Comment</th>
        <th></th>
        </tr>
        </thead>
        <tbody>
          <form data-role="save-label" data-id="1" id="form-1" method="get">
            <tr>
              <td>1 <input type="hidden" name="id" value="1"> 
              </td>
              <td>GL1</td>
              <td>UP</td>
              <td>sDNA</td>
              <td>1A</td>
              <td>
                <select name="box-1">
                  <option id="1-2" value="2" >
                    Box 1                
                  </option>
                  <option id="1-3" value="3" >
                    Box 2                
                </option>
                <option id="1-4" value="4" >
                  Box 3
                </option>
                <option id="1-5" value="5" >
                  Box 4                
                </option>
                <option id="1-1" value="1" selected>
                  None                
                </option>
              </select>
            </td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isin-1" name="isin-1" value="0" />
            </td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isout-1" name="isout-1" value="0" /></td>
            <td>
              <input class="sm-inp" type="number" min="0" max="1" id="isanalized-1" name="isanalized-1" value="0" />
            </td>
            <td>
              <input class="md-inp" type="text" id="comment-1" name="comment-1" value="" />
            </td>
            <td>
              <input type="submit" id="submit-1" value="Save" />
            </td>
          </tr>
        </form>
 
        <form data-role="save-label" data-id="2" id="form-2" method="get">
          <tr>
            <td2 <input type="hidden" name="id" value="2"> 
            </td>
            <td>GL1</td>
            <td>UP</td>
            <td>sDNA</td>
            <td>1A</td>
           [... suite des td ..]
        </tr>
      </form>
    </tbody>
  </table>

Quand je le passe sur W3C, j'ai ce message d'erreur

Element form not allowed as child of element tbody in this context. (Suppressing further errors from this subtree
Stray end tag form

Je suis un peu surpris car j'ai vérifier mon code et il n'y a pas d'élément qui se "mange" du genre

Code :

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

1
2
3
4
5
6
7
8
<table>
<form>
<tr>
<td>
</td>
</form>
</tr>
</table>

J'en conclu que le formulaire doit etre en dehors de <table>, mais ci c'est bien le cas, comment puis-je avoir un formulaire avec un bouton submit par ligne???


Merciii!

[NoSmoking]

Bonjour,

Je suis un peu surpris car j'ai vérifier mon code et il n'y a pas d'élément qui se "mange" du genre

ben si justement !!!

Code html :

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

1
2
3
<tbody>
  <form data-role="save-label" data-id="1" id="form-1" method="get">
    <tr> <!-- doit être enfant direct de TBODY dans ce cas -->

J'en conclu que le formulaire doit etre en dehors de <table>, mais ci c'est bien le cas, comment puis-je avoir un formulaire avec un bouton submit par ligne???

Et il est où l'intérêt dans ton cas, il n'y a pas d'action sur tes <form> ?

[Invité]

Bonjour,

Explique-nous d'abord comment tu comptes effectuer le traitement :

• En PHP : clic sur le bouton -> accès à la page de traitement PHP (donc avec rechargement de la page) ?
• Sans rechargement de page, via JavaScript/Ajax ?

• Une seule ligne à la fois ?
• Plusieurs lignes en même temps ?

Les solutions à mettre en place sont différentes.


N.B. Dans ton cas de figure, une solution "simple" consiste à :

• Remplacer les <table>, <tr>, <td> par des <div>,
• Et d'appliquer en CSS des display:table / table-row / table-cell, pour simuler le même fonctionnement.

[pierrot10]

Bonjour,.

Merci pouir vous eéponses.

<!-- doit être enfant direct de TBODY dans ce cas -->

D'accord, je ne le savais pas mais j'ai en effet essayer de faire comme ceci

Code :

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

1
2
3
4
5
6
7
8
<tbody>
<tr>
<form>
<td>
</td>
</form>
</tr>
</tbody>

Pour répondre a jeraux62, en effaet, j'aurais du le préciser, il n'y a pas d'action car, le formulaire est envoyer avec ajax, et une ligne à la fois.
Donc a chaque fois qu'on met en échantillon à jour, on modifie la ligne et on sauve. Il me faut donc un formulaire par ligne.

Remplacer les <table>, <tr>, <td> par des <div>

Oui je vais le faire. J'y avais penser et ca me semble mieux, en effet

[Invité]

Si le traitement se fait avec Ajax, tu n'as pas besoin des balises <form>.

Problème résolu.

N.B. Par contre, il te faut alors bien identifier - et cibler - les champs de la ligne concernées.
Avec un data-id sur chaque input submit.

[pierrot10]

Salut Jereaux,
D'accord. J'ai tout refait avec des div et je me "grave la tete.
Dans mon cas j'ai 11 colonnes et une 30ene de ligne. J'ai aussi défini des largeurs pour chaque colonne, du genre

Code :

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

1
2
3
4
5
 
.divTableCell:nth-child(2){
	width:200px;
	background-color: green;
}

Si je comment ma forme

Code PHP :

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

1
2
3
 
// echo '<from>'
//echo '</form>'

L'affiache est très bien.
Si je décommente. les deux lignes qui n'ont pas de forme (soit la première ligne qui contient les titres des colonnes) et la dernière qui es identique que la première, les largeurs sont disproprtionnées et peu comme si j'avais mis par erreur une colonne en plus.

En d'autre terme le CSS que j'ai chois, n'aime pas la basile forme. Je ne peux pas montrer la source de la page que je suis dérrière un firewall, mais en gros c'est a, avec 30 lignes
https://divtable.com/generator/

Code CSS :

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
 
/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
.divTableCell:nth-child(1){
	width:20px !important;
	background-color: red;
}
.divTableCell:nth-child(2){
	width:200px;
	background-color: green;
}
.divTableCell:nth-child(3){
	width:80px;
	background-color: yellow;
}
.divTableCell:nth-child(4){
	width:100px;
	background-color: #ff22ff;
}

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>

Ceci dit, j'aimeraqis bien garder ma balise form, car je ne sais pas encore si au final, je ferai ceci avec ajax. C'est mon but, mais je crais rencontrer d'autres difficultés qui me pousseront a ne plus utiliser ajax. Donc pour le moment, je vais supprimer la balise forme, mais je rsique de devoir résoudre ce problème plus tard.