[jquery] verplaatsen van tabel rij tussen tabellen

[skate master]

mensen,

Ik ben bezig met een site waarop Items toegekend kunnen worden aan een persoon.
Mijn idee is om dit door middel van twee tabellen te doen.
Tabel 1: beschikbare items
Tabel 2: geselecteerde items.

Het idee is dan dat een beschikbaar item verplaatst wordt (middels Jquery) naar de tabel geselecteerd door middel van het plaatsen van een vinkje in een checkbox.

Met mijn basis Jquery skills en google als hulp dacht ik dit wel voor elkaar te krijgen. Helaas.
Het verplaatsen van de items van beschikbaar naar geselecteerd lukt.
Echter het terug plaatsen van een item krijg ik niet voor elkaar.

Waarschijnlijk maak ik ergens een hele simpele denk fout, maar ik zie het niet meer.
Wie o wie geeft mij het zetje dat ik nodig heb?

Ik heb even een voorbeeldje in elkaar ge-fiddled: https://jsfiddle.net/mqgc2n81/6/

Relevante code:

HTML:

<h4>
Beschikbare items
</h4>
<table id="beschikbaar">
  <thead>
    <tr><th>#</th><th>Item naam</th></tr>
  </thead>
  <tbody>
    <tr><td><input type="checkbox" name="items[]" value="1" class="chkBeschikbaar"></td><td>Item 1</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="2" class="chkBeschikbaar"></td><td>Item 2</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="3" class="chkBeschikbaar"></td><td>Item 3</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="4" class="chkBeschikbaar"></td><td>Item 4</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="5" class="chkBeschikbaar"></td><td>Item 5</td></tr>
  </tbody>
</table>
<h4>
Geselecteerde items
</h4>
<table id="geselecteerd">
  <thead>
    <tr><th>#</th><th>Item naam</th></tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

JavaScript:

$('.chkBeschikbaar').change(function(){
            if($(this).is(':checked')){
                // item verplaatsen naar geselecteerd
                $(this).closest("tr").clone().appendTo("#geselecteerd tbody");
                $(this).closest("tr").remove();
            } else {
                // item verplaatsen naar beschikbaar
                $(this).closest("tr").clone().appendTo("#beschikbaar tbody");
                $(this).closest("tr").remove();
            }
});

[TheRookie]

hier stond onzin

[ Voor 92% gewijzigd door TheRookie op 23-03-2016 14:18 . Reden: verkeerd gelezen ]

[Juup]

Je moet de rows niet clonen en daarna deleten maar gewoon alleen appenden.
Dan behoud je ook het change event op de rows.

[sunflame]

Zo dus... https://jsfiddle.net/a225kejv/

[skate master]

Jaaap en sunflame bedankt voor het duwtje in de juiste richting.
Gewoon een hele ochtend verkloot met dit gedoe, terwijl de oplossing logisch en voor de hand liggend is.