[JS]Inserer une ligne après la ligne sur laquelle on clique

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS]Inserer une ligne après la ligne sur laquelle on clique

Alisteroid

Bonjour à tous,

Je cherche à inserer dans un tableau HTML, juste après la ligne sur laquelle j'ai cliqué.

J'ai fait :

HTML

Code :

<tr onclick="insertRow(this)"></tr>

pour chaque ligne de mon tableau

JS

Code :

function insertRow(row)
//Récupération du numéro de ligne sur laquelle j'ai cliqué
var indexligne_to_insert = parseInt(row.parentNode.rowIndex) + 1;
tr = document.getElementById('tableau').insertRow(parseInt(indexligne_to_insert));

Malheureusement je m'apercoit que la fonction insertRow(), n'accepte que 0,1 et -1 comme valeur
Je vois pas trop comment faire :love:
Aidez moi ou je tue mon chien :love:

Message édité par Alisteroid le 21-05-2007 à 13:57:02

Publicité

flo850

moi je

je veux une tof du chien avant de repondre

sinon
1- tu crée a ligne comme il faut avec dom ( avec des td = document.createElement('td') , un tr = document.createElement('tr') et des tr.appendChild(td)

2- si tu insere la ligne a la fin de ton tableau ( row.nextSibling est null ) tu fait un row.parentNode.appendChild(tr)

3 sinon, tu l'insere avant la suivante avec un row.parentNode.insertBefore(tr,row )

Alisteroid

Tu pourrais me détailler la fonction un peu comme j'ai fait? je mélange un peu tout dans ce que tu me dis, et le JS c'est pas trop mon truc

Message édité par Alisteroid le 21-05-2007 à 14:10:11

flo850

moi je

techniquement, j'ai mis plus de detail que toi( vu que j'utilse des fonctions qui existent reellement )

apres, je te laisse un peux voir comment fonctionnnent les fct que je te donne ( en plus sans savoir la gueule de ton tableau , ca va etre chaud d'en faire plus )

a moins que tu n'ai des questions précises

Message édité par flo850 le 21-05-2007 à 14:12:21

Alisteroid

Code :

function insertRow(row){
// Nouveau TD
var td= document.createElement('td');
td.appendChild(document.createTextNode('Nouvelle cellule '));
// Nouveau TD
var td2 = document.createElement('td');
// Nouveau TR
var tr = document.createElement('tr');
tr.appendChild(td);
tr.appendChild(td2);
// Ajout du nouveau TR au tableau
row.parentNode.insertBefore(tr,row )
}

Putain, on est obligé de faire le travail soit même maintenant [:zytrasnif]
Bon ça marche, j'ai encore un truc, pour mettre un colspan sur une cellule, je fais

Code :

td.setAttribute("rowspan",2);

??

Merci beaucoup de ton aide, et de ta rapidité.

Et mes fonction utilisée au debut existent [:cerveau thalis]
[:cerveau fuck]

Message édité par Alisteroid le 21-05-2007 à 14:24:52

anapajari

s/travail/glanding on hfr/gs;

nan mais nan hein
insertRow fait ça très bien, c'est ptêt pas la peine d'en recoder une.
Et au passage insertRow prend bien un index et pas seulement 0,1 ou -1.

Par contre la propriété rowIndex c'est sur une ligne alors que tu l'as fait remonté au parentNode ( le tableau) ça risque donc pas de marcher.

Enfin pour qu'une "ligne"(tr) soit valide en DOM, il lui faut contenir au moins un td ( ce qui n'est pas le cas dans ton exemple).

Bref la fonction à peine retouché et qui "doit" marcher c'est:

Code :

function insertRow(row){
var iL = parseInt(row.rowIndex) + 1;
tr = document.getElementById('tableau').insertRow(iL);
tr.innerHTML = 'new index:'+tr.rowIndex;
}

Note: un petit oeil sur la doc t'aurais appris tout ça: http://developer.mozilla.org/en/do [...] .insertRow

Message cité 2 fois
Message édité par anapajari le 21-05-2007 à 14:25:55

flo850

moi je

:sol:

Message édité par flo850 le 21-05-2007 à 14:25:51

flo850

moi je

anapajari a écrit :

nan mais nan hein
insertRow fait ça très bien, c'est ptêt pas la peine d'en recoder une.
Et au passage insertRow prend bien un index et pas seulement 0,1 ou -1.

Par contre la propriété rowIndex c'est sur une ligne alors que tu l'as fait remonté au parentNode ( le tableau) ça risque donc pas de marcher.

Enfin pour qu'une "ligne"(tr) soit valide en DOM, il lui faut contenir au moins un td ( ce qui n'est pas le cas dans ton exemple).

Bref la fonction à peine retouché et qui "doit" marcher c'est:

Code :

function insertRow(row){
var iL = parseInt(row.rowIndex) + 1;
tr = document.getElementById('tableau').insertRow(iL);
tr.innerHTML = 'new index:'+tr.rowIndex;
}

Note: un petit oeil sur la doc t'aurais appris tout ça: http://developer.mozilla.org/en/do [...] .insertRow

c'est vrai que j'avais pas pensé a insertRow + innerHTML
mais je préfère faire les cases a la main pour gérer le contenu , et les styles à appliquer

anapajari

s/travail/glanding on hfr/gs;

nan mais le inner il est violement goret faut pas faire ça !!!
C'était juste pour voir quelque chose que je l'ai laissé trainé! [:dawak]
On est censé faire du insertCell et du createTextNode pour mettre des données dedans

note: j'ai par contre pas compris ton argument sur les styles

Message cité 1 fois
Message édité par anapajari le 21-05-2007 à 14:31:59

Alisteroid

anapajari a écrit :

nan mais nan hein
insertRow fait ça très bien, c'est ptêt pas la peine d'en recoder une.
Et au passage insertRow prend bien un index et pas seulement 0,1 ou -1.

Par contre la propriété rowIndex c'est sur une ligne alors que tu l'as fait remonté au parentNode ( le tableau) ça risque donc pas de marcher.

Enfin pour qu'une "ligne"(tr) soit valide en DOM, il lui faut contenir au moins un td ( ce qui n'est pas le cas dans ton exemple).

Bref la fonction à peine retouché et qui "doit" marcher c'est:

Code :

function insertRow(row){
var iL = parseInt(row.rowIndex) + 1;
tr = document.getElementById('tableau').insertRow(iL);
tr.innerHTML = 'new index:'+tr.rowIndex;
}

Note: un petit oeil sur la doc t'aurais appris tout ça: http://developer.mozilla.org/en/do [...] .insertRow

Merci pour ton aide aussi, j'ai cherché aussi t'inquiete pas j'ai ramé une heure avant de poster, je viens pas chialer ici au moindre probleme
Bref merci encore je crois que je vais continuer sur ma solution bien plus simple, mon site ne doit être compatible que IE6, donc c'est très bien , on me demande d'aller au plus vite, du moment que ça marche, c'est bien . En touyt cas je garde pour moi, l'autre solution

Message édité par Alisteroid le 21-05-2007 à 14:32:45

Publicité

anapajari

s/travail/glanding on hfr/gs;

marche très bien avec IE6 ce que j'ai filé plus haut

Alisteroid

C'est ce que je dis

Alisteroid

parseInt(row.rowIndex) me rend NaN

anapajari

s/travail/glanding on hfr/gs;

code de ta page? Parce que http://chezmoicamarche.com/

Code :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Insert Row</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<script type="text/javascript">
function insertRow(row){
var iL = parseInt(row.rowIndex) + 1;
var tr = document.getElementById('tableau').insertRow(iL);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('index:'+tr.rowIndex));
var td2 = tr.insertCell(1);
td2.appendChild(document.createTextNode('toto'));
//en bonux je rajouterais ça:
tr.onclick = row.onclick;
}
</script>
</head>
<body>
<table id="tableau">
<tr onclick="insertRow(this)"><td>A</td><td>1</td></tr>
<tr onclick="insertRow(this)"><td>B</td><td>1</td></tr>
<tr onclick="insertRow(this)"><td>C</td><td>1</td></tr>
<tr onclick="insertRow(this)"><td>D</td><td>1</td></tr>
<tr onclick="insertRow(this)"><td>E</td><td>1</td></tr>
</table>
</body>
</html>

flo850

moi je

anapajari a écrit :

J'ai des styles differents suivant les lignes et les colonnes sur le style sur lequel je bosse. Donc j'ai un( des ) classes a metrte sur le tr , et parfois une ( des ) classes a mettre sur le td

pour la petite histoire, le tr sert change de couleur toutes les lignes ( classique )
les td changent de couleur pour afficher par exemple la plus grosse valeur du tableau, ou une valeur superieure a un seuil , ...

au final , ca va quasi aussi vite avec createElement('td')

Message cité 1 fois

Alisteroid

Arf la galère, mon code fait 400 lignes, c'est un énrome tableau de stats, et j'avais pas vu que j'avais mis mon evennement JS sur un TD au lieu du TR

Merci énormément à vous deux :jap:

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

flo850 a écrit :

Bin ça change rien du tout et ça va aussi tout court [:spamafote]
Le insertRow c'est exactement un createElement('tr') + append dans le tableau. D'ailleurs insertRow te retourne une référence sur ton obj tr avec les mêmes propriétés qu'un createElement.
Et pareil pour insertCell (createElement('td') + append).
Par contre IE a tendance à mieux tolérer le bourrinage de ligne via les insert* qu'en DOM pur.

Alisteroid a écrit :

Arf la galère, mon code fait 400 lignes, c'est un énrome tableau de stats, et j'avais pas vu que j'avais mis mon evennement JS sur un TD au lieu du TR

[:bravo]

Message cité 1 fois

flo850

moi je

anapajari a écrit :

bon alors je me complique la vie pour rien ( en meme temps ca change pas grd chose niveau quantite de code)

Alisteroid

Bon une toute dernière question promis juré :
Si je veux attribuer la fonction delerow à l'evenement onclick pour la nouvelle ligne comment dois je le déclarer?J'ai essayé différentes trucs sans succes.

En fait mon but est d'inserer une ligne lorsque je clique sur une ligne et de la supprimer lorsque je clique sur la ligne d'origine ou sur la ligne crée.

Message édité par Alisteroid le 21-05-2007 à 15:25:15

anapajari

s/travail/glanding on hfr/gs;

au lieu de:

Code :

//en bonux je rajouterais ça:
tr.onclick = row.onclick;

mettre

Code :

tr.onclick = function (){
this.parentNode.deleteRow(this.rowIndex);
}

et lire la doc: http://developer.mozilla.org/en/do [...] .deleteRow

edit: et pour que ça fait pareil sur la ligne d'origine, il faut changer le handler du row "d'origine" en t'inspirant de ça

Message édité par anapajari le 21-05-2007 à 15:31:26

Alisteroid

[:cerveau boulay]

[:cerveau yamimakai]

Merci de votre patience [:cerveau atsuko]

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[JS]Inserer une ligne après la ligne sur laquelle on clique

Sujets relatifs
Retour à la ligne précédente	PROJET CREATION JEU EN LIGNE
facture en pdf en ligne	aller a la ligne dans un fichier texte
Inserer 2 valeurs dans 2 tables differentes	timestamp à insérer dans DB2
Compactage BDD par ligne de commande	Pb lors de la mise en ligne d'un diapo Flash
Probleme de mise en ligne apres upload des html	Inserer un listbox en html
Plus de sujets relatifs à : [JS]Inserer une ligne après la ligne sur laquelle on clique

Page générée en 0.101 secondes