insertRow - impossibilité de définir les propriétés de la ligne créée

**Pgs** · 20/05/2017, 17h22

Bonjour,

Lorsque j'ajoute une ligne

Code :

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

newRow = document.getElementById("mytab").getElementsByTagName("tbody")[0].insertRow(0)

je n'arrive pas à lui donner un id et une class.

J'ai essayé de nombreuses choses

Code :

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

newRow.id=..., newRow.setAttribute(...), newRow.classList.add(...)

Rien n'y fait.

Pourtant, ma ligne est bien créée et je lance sans problème des newRow.insertCell(-1)

Y a-t-il des restrictions ?

Merci

**Beginner.** · 20/05/2017, 19h13

Salut,

As-tu un code pour voir... ? Car j'ai essayé avec newRow.id="..." et ça fonctionne chez moi...

**danielhagnoul** · 21/05/2017, 00h40

Exemple :

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
76
77
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    table {
      margin: auto;
      border: 1pt solid grey;
      border-spacing: 0;
    }
    th, td {
      min-width: 10rem;
      max-width: 20rem;
      padding: 0.3rem;
      border: 1pt solid grey;
    }
    #oneRow {
      color: red;
    }
    .colorCell {
      background-color: rgba( 100, 25, 75, 0.25 );
    }
  </style>
  <script>
    'use strict';
    
    document.addEventListener( "DOMContentLoaded", ev => {
      
    }, false );
    
    window.addEventListener( "load", ev => {
      
      const
        elemTbody = document.querySelector( "table > tbody" ),
        elemRow = elemTbody.insertRow( -1 ),
        elemCell = elemRow.insertCell( -1 );
        
      elemRow.setAttribute( "id", "oneCell" );
      
      elemCell.setAttribute( "class", "colorCell" );
      elemCell.textContent = "Une cellule";
      
      const
        elemCell3 = elemRow.insertCell( -1 );
        
      elemCell3.setAttribute( "colspan", 3 );
      elemCell3.style.textAlign = "center";
      elemCell3.textContent = "Une grande cellule";
 
    }, false );
  </script>
</head>
<body>
 
  <table>
    <thead>
      <tr>
        <th>head1</th>
        <th>head2</th>
        <th>head3</th>
        <th>head4</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
 
</body>
</html>

**Pgs** · 21/05/2017, 07h58

Merci.

Vous avez raison, je me suis trompé de diagnostic :

Code :

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

1
2
3
4
 
echo 'var newRow = document.getElementById("mytab").getElementsByTagName("tbody")[0].insertRow(0);';
echo 'newRow.id="'.$newid.'";';
echo 'newRow.setAttribute("class", "myaction");';

fonctionne correctement.

Ce qui ne fonctionne pas, c'est que la nouvelle ligne créée ne réagit pas à :

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
 
<script>
$(document).ready(function() {
	$(".myaction").click(function() {
	$.ajax({
		url: \traitement.php\',
		type : \'POST\',
		dataType : \'script\',
		data : \'id=\'+ this.id,
		error: function() {
		alert("Echec du traitement");
		}
		});
	});
});
</script>

alors que toutes les lignes du tableau créées lors de la génération initiale de la page fonctionnent correctement.

Philippe

**danielhagnoul** · 21/05/2017, 09h44

Envoyé par Pgs

Ce qui ne fonctionne pas, c'est que la nouvelle ligne créée ne réagit pas à : $(".myaction").click(function() {

C'est le comportement normal avec du code dynamique.

En JS, il faut tuer et recréer le gestionnaire d'événement après avoir modifié la table.

En jQuery, voir : Différences entre on() avec 1 ou 2 sélecteurs

**Pgs** · 21/05/2017, 10h03

Je te remercie pour l'explication et pour le lien.

a) Mais comme je débute avec jQuery, je ne vois pas ce qu'il faut que je code pour "rafraîchir" la gestion des évènements après ajout de la ligne.
Peux tu m'aider ?

b) Petite question : si, au lieu de passer par insertRow, j'ajoute "<tr id="..." class="myaction">...</tr>" au innerHTML du tbody, cela résoud le problème ?

Merci

**Pgs** · 21/05/2017, 11h53

J'ai remplacé

Code :

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

$(".myaction").click(function()

par

Code :

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

$(document).on(\'click\', \'.myaction\', function()

et ça fonctionne.

Je te remercie !

**Pgs** · 26/05/2017, 17h26

Bonjour,

Code :

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

$(document).on(\'click\', \'.myaction\', function() ...

a résolu mon problème : si je rajoute avec newRow, dans tbody, une ligne de classe myaction, les évènements sur cette ligne sont ensuite bien pris en compte.

En revanche, si je mets à jour complètement tbody par

Code :

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

document.getElementById("idtab").getElementsByTagName("tbody")[0].innerHTML=...

alors le premier click suivant cette mise à jour ne déclenche pas d'action, puis tous les clicks suivants fonctionnent parfaitement.

Faut-il lancer une instruction après le remplacement du innerHTML du tbody afin que les évènements soient ensuite gérés dès le premier click ?

Merci

**danielhagnoul** · 26/05/2017, 21h45

Sans vos codes pour tester...

**Pgs** · 27/05/2017, 10h11

Bonjour,
Voici :

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
<!doctype html>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script src="jquery-3.2.1.js"></script>
	<script>
	function traitement(obj) {
		if((obj.id.substring(0,1)!="e")||(confirm("Confirmer")))
		{
		$.ajax({
			url: 'trt.php',
			type : 'POST',
			dataType : 'script',
			data : 'id='+ obj.id+'&val='+ obj.value,
			error: function() {
			}
			});
		}
	}
	$(document).ready(function() {$(document).on('click', '.c1', function() {traitement(this);});
	</script>
	</head>
	<body><table id="idtab"><tbody>
	<tr><td>En cours</td><td id="r2" class="c1"></td></tr>
	</tbody></table></body></html>

trt.php contient

Code :

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

 document.getElementById("idtab").getElementsByTagName("tbody")[0].innerHTML='<tr><td>Traité</td><td id="r2" class="c1"></td></tr>';

Et voici ce qui se passe :
a) si je clique sur le td ayant pour id "r2", cela lance trt.php et donc cela remplace le innerHTML du tbody
b) si je fais ensuite un nouveau click sur ce td, il ne se passe rien.
c) Ce n'est qu'à partir du click suivant que cela fonctionne à nouveau.

A chaque fois que le innerHTML du tbody est remplacé, le premier click effectué ensuite sur <td id="r2" class="c1"> ne déclenche pas d'évènement. Mais tous les clicks suivants sur ce td fonctionnent.

**Pgs** · 30/05/2017, 07h13

Je pense que j'ai trouvé.
J'ai aussi dans mon code :

Code :

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

1
2
$(document).ready(function() {$(document).on('blur', '.c1', function() {traitement(this);});
$(document).ready(function() {$(document).on('change', '.c1', function() {traitement(this);});

Et en général, je lance la mise à jour de tbody par un select. Lorsque que je vais ensuite cliquer sur une zone du tbody, il traite l'évenement blur du select, ce que je ne veux pas ici.

Je vois deux possibilités :
* limiter $(document).on('blur'... aux input,
* faire automatiquement perdre le focus au select directement après traitement.

Pouvez-vous me guider concernant le code pour ces deux cas ?

Merci

**danielhagnoul** · 01/06/2017, 23h00

Dans le message n° 10, pourquoi changer le contenu du "tbody" alors que vous ne devez changer que le contenu texte d'une cellule de la table ?

Je vous conseille de demander à un modérateur le transfert de votre discussion vers le forum jQuery.

insertRow - impossibilité de définir les propriétés de la ligne créée

jQuery

Discussions similaires

Partager

Partager