Supprimer,déplacer,ajouter colonne tableau html

Version imprimable

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.

30/03/2009, 08h33
andry.aime
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>

31/03/2009, 09h43
Shandler

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
31/03/2009, 10h00
andry.aime

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:
31/03/2009, 10h02
Shandler
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>

Code:

1
2
3
4
function supprimer(ligne)
{
$('#'+ligne).remove();
}

31/03/2009, 10h17
Shandler

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.

31/03/2009, 10h51
Shandler

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.
31/03/2009, 12h12
andry.aime

: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()});
}

31/03/2009, 13h00
Shandler

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.
31/03/2009, 13h11
andry.aime

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?
31/03/2009, 14h14
Shandler

Aprés avoir cliquez sur le lien supprimer
31/03/2009, 14h24
andry.aime

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");
});
}

31/03/2009, 16h35
Shandler

Toujours le meme probléme qui fait que quand je clique sur supprimer la ligne disparait et réapparait juste apprés et que peut importe sur le quelle supprimer je clique il veut toujours supprimer que le dernier de la liste, c bizarre.

Merci a toi.
03/04/2009, 08h43
andry.aime

Salut, essaye avec

Code:

$("#table-1 a").mouseclick(function(){$(this).parent("tr").remove()});
03/04/2009, 10h37
Shandler

Merci pour ton aide mais te derniére idée sachant que mouseclick pas vue avec jquery donc j'ai mis click mais ca marche pas mieux.

Je pense que je vais finir par mettre un onclick sur les liens.

Merci a toi