Supprimer,déplacer,ajouter colonne tableau html

Bonjour,

Je suis débutant et j'aimerai pour faire en sorte que sur un tableau je puise enlever,ajouter et deplacer des lignes.

Donc j'ai trouve le code pour déplacer les lignes :
j'utilise pour cela ce plugin : http://www.isocra.com/2008/02/table-...jquery-plugin/

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<script type="text/javascript" src="jquery.tablednd_0_5.js"></script>   $("#table-1").tableDnD({ onDragClass: "myDragClass", onDrop: function(table, row) { $.ajax({ type: "POST", url: "test.php", data: $.tableDnD.serialize(), success: function(msg){ alert(msg); } });   } });

---

J'ai trouvé comment ajouter une colonne :

Code:

---

1 2 3 4 5

$('#btnShowColumn').click(function() { var i = '#table-1'.length; $('<tr id="'+(i+1)+'"><td>'+(i+1)+'</td><td>Three</td><td>some text</td></tr>').appendTo("#table-1"); });

---

Mon code html :

Code:

---

1 2 3 4 5 6 7

<input type="button" value="Add show column" id="btnShowColumn"/> <table id="table-1" class="go" cellspacing="0" cellpadding="2"> <tr id="1"><td>1</td><td>One</td><td>some text</td></tr> <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr> <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr> </table>

---

Donc mon probléme est que j'arrive pas assemble c'est deux truc la et aussi implementer la suppression de la ligne.

Merci pour votre et vos lumieres.

Salut
pour la suppression d'une ligne:

Code:

---

1 2	function deleterow(idligne) $('#'+idligne).remove();

---

n'utilise pas uniquement des chiffres pour les id,

Salut,

Merci a toi, pourquoi ne pas utiliser que des chiffres ?

Sinon la suprression ne marche pas sur toute les ligne ca marche toujours que sur la premiére et je n'arrive toujours pas quand j'ajoute une nouvelle pouvoir la deplacer grace a http://www.isocra.com/2008/02/table-...jquery-plugin/

Merci a toi.

Code:

---

1 2 3 4 5 6

<table id="table-1" class="go" cellspacing="0" cellpadding="2"> <tr id="2"><td>2</td><td>Two</td><td>some text</td><td><a id="delete" href="">Supprimer</a></td></tr> <tr id="1895"><td>1</td><td>One</td><td><input type="text" /></td><td><a id="deletes" href="">Supprimer</a></td></tr> <tr id="3"><td>3</td><td>Three</td><td>some text</td><td><a id="delete" href="">Supprimer</a></td></tr> </table>

---

Code:

---

1 2 3 4 5

$('#delete').click(function() { var a = $("tr").attr("id"); $('#'+a).remove(); });

---

Merci a vous.

Euh, je ne sais pas si j'ai mal exprimé mais je voulais te dire que ne n'utilise pas tout simplement des chiffres pour les id mais tu dois le débuté avec des caractères alphabétique. Un id doit être aussi unique dans une page.

Code:

---

1 2 3 4 5

<table id="table-1" class="go" cellspacing="0" cellpadding="2"> <tr id="ligne_2"><td>2</td><td>Two</td><td>some text</td><td><a id="delete" href="">Supprimer</a></td></tr> <tr id="ligne_1895"><td>1</td><td>One</td><td><input type="text" /></td><td><a id="deletes" href="">Supprimer</a></td></tr> <tr id="ligne_3"><td>3</td><td>Three</td><td>some text</td><td><a id="delete" href="">Supprimer</a></td></tr> </table>

---

ok pour l'id mais je dois pas quand même faire une fonction délete pour chaque ligne de mon tableau ?

merci a toi

Tu ne vas pas faire une delete pour chaque ligne de tableau mais en passant l'id de la ligne à supprimer en paramètre d'une fonction qui supprime une ligne. :aie:

Oui comme ci-dessous sauf que ca marche que sur la permiére ligne du tableau et pas le reste.

Code:

---

1 2 3 4

$('#delete').click(function() { var a = $("tr").attr("id"); $('#'+a).remove(); });

---

Merci a toi

Le tableau

Code:

---

1 2 3 4 5

<table id="table-1" class="go" cellspacing="0" cellpadding="2"> <tr id="ligne_2"><td>2</td><td>Two</td><td>some text</td><td><a href="#" onclick="supprimer('ligne_2'); return false;">Supprimer</a></td></tr> <tr id="ligne_1895"><td>1</td><td>One</td><td><input type="text" /></td><td><a href="#" onclick="supprimer('ligne_1895'); return false;">Supprimer</a></td></tr> <tr id="ligne_3"><td>3</td><td>Three</td><td>some text</td><td><a href="#" onclick="supprimer('ligne_3'); return false;">Supprimer</a></td></tr> </table>

---

Js

Code:

---

1 2 3 4

function supprimer(ligne) { $('#'+ligne).remove(); }

---

Pourquoi on utilise click de jquery pour ce cas ?

Essaye alors avec

Code:

---

1 2 3 4

$('#table-1 tr').click(function(){ var a = $("#table-1 tr").attr("id"); $('#'+a).remove(); });

---

La code précédente a-t-il fonctionné? pour info.

1er solution marche bien mais la 2éme non car il me supprime toujours que la 1er ligne et en plus quand j'appuie il disparait puis revient aussitôt

Merci a toi.

:triste:
c'est parceque click n'est attribué qu'un seul fois, donc la première ligne seulement. :oops:

Bonjour.

Attention ! Un id doit être unique.

Code:

---

1 2 3 4 5 6

<table id="table-1" class="go" cellspacing="0" cellpadding="2"> <tr id="ligne_2"><td>2</td><td>Two</td><td>some text</td><td><a id="delete" href="">Supprimer</a></td></tr> <tr id="ligne_1895"><td>1</td><td>One</td><td><input type="text" /></td><td><a id="deletes" href="">Supprimer</a></td></tr> <tr id="ligne_3"><td>3</td><td>Three</td><td>some text</td><td><a id="delete" href="">Supprimer</a></td></tr> </table>

---

Hors ici id=delete est répété plusieurs fois.

Code:

---

1 2	<a id="delete" href="">Supprimer</a></td>

---

Code:

---

1 2 3 4 5 6 7 8

var table = document.getElementById('table-1'); var rows = table.getElementsByTagName("tr"); var ligne=""; for(i = 0; i < rows.length; i++) { ligne='#'+rows[i].id; $(ligne).click(function(){$(ligne).remove()}); }

---

Ca beug toujour, il ne supprime toujours que la 1er et en plus la suprression ne reste pas car l'element supprimer revient encore.

Bon je vais finir par croire que c'est pas possible d'utiliser click pour faire ce que je veux.

Merci a toi.

Citation:

---

Ca beug toujour, il ne supprime toujours que la 1er et en plus la suprression ne reste pas car l'element supprimer revient encore.

---

Quant est ce que l'élément supprimer revient?

Aprés avoir cliquez sur le lien supprimer

Ajoute

Code:

---

$("#table-1").trigger("update");

---

Jai les mit dedans mais toujour pareil.

Code:

---

1 2 3 4 5

$('#table-1 tr').click(function(){ var a = $("#table-1 tr").attr("id"); $('#'+a).remove(); $("#table-1").trigger("update"); });

---

Merci a toi

Je t'ai donnée le code

Code:

---

1 2 3 4 5 6 7 8 9

var table = document.getElementById('table-1'); var rows = table.getElementsByTagName("tr"); var ligne=""; for(i = 0; i < rows.length; i++) { ligne='#'+rows[i].id; $(ligne).click(function(){$(ligne).remove();$("#table-1").trigger("update"); }); }

---