Discussion :

[Shandler]

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 :

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
 
<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 :

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

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 :

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

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.

[andry.aime]

Salut
pour la suppression d'une ligne:

Code :

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

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

n'utilise pas uniquement des chiffres pour les id,

[Shandler]

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 :

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

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 :

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

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

Merci a vous.

[andry.aime]

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 :

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

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>

[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

[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.

[Shandler]

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

Code :

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

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

Merci a toi

[andry.aime]

Le tableau

Code :

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

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 :

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

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

[Shandler]

Pourquoi on utilise click de jquery pour ce cas ?

[andry.aime]

Essaye alors avec

Code :

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

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.

[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.

[andry.aime]

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

[danielhagnoul]

Bonjour.

Attention ! Un id doit être unique.

Code :

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

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 :

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

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

[andry.aime]

Code :

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

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

[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.

[andry.aime]

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?

[Shandler]

Aprés avoir cliquez sur le lien supprimer

[andry.aime]

Ajoute

Code :

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

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

[Shandler]

Jai les mit dedans mais toujour pareil.

Code :

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

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

[andry.aime]

Je t'ai donnée le code

Code :

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

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