Buttons in HTML Tabelle funktonieren nicht ...

[borgplasma]

Hallo zusammen,

ich stehe mit Javascript auf Kriegsfuß, und habe momentan nicht die Muße dazu, mich da mehr einzuarbeiten. Daher benötige ich eure Unterstützung

Ich habe ein Script gefunden, welches Prinzipiell das tut was ich möchte, nur nicht zu 100%. Und dieses abzuändern, tue ich mich leider sehr schwer und kriege es nicht hin ....

Folgende Situation:
Ich habe eine HTML Tabelle mit werten aus einer DB gefüllt. Nun möchte ich am ende der Tabelle mit zwei Buttons dem User ermöglichen, das er die Tabelle um eine Zeile erweitern kann, oder das er diese zeile mit einem weiteren Button löschen kann.

Gefunden habe ich ein Script, welches sich auf einen Button bezieht. Dieser Button startet als "Add Item", und wird bei neuanlage zu einem "Remove Row" Button:

<script type="text/javascript">
[... html Tabelle ...]
                   <td><input type='button' class='AddNew' value='Add new item'></td>
[... html Tabelle Ende...]

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').not('[readonly]').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});

</script>

Wenn ich aber dieses so nehme, und die Tabelle hat x Einträge, dann habe ich xmal "Add item", aber keinen Remove Row. Und erst bei Neuanlage einer zeile habe ich den Remove Row, welches sich nur auf die neue Zeile bezieht. Nicht ganz was ich will.

Ich habe das script nun so geändert:

<script type="text/javascript">
[... html Tabelle ...]
                   <td><input type='button' class='AddNew' value='Add new item'></td>
                   <td><input type='button' class='Remove' value='Remove item'></td>
[... html Tabelle Ende...]

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').not('[readonly]').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).addClass('AddNew').val('Add new item');
});

$('.Remove').click(function(){
   var row = $(this).closest('tr').remove();
   row.find('input').not('[readonly]').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).addClass('Remove').val('Remove item');
 });

$('table').on('click', '.AddNew', function(){
  $(this).closest('tr').clone();
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});
</script>

Das Arbeitet insofern richtig, das ich in jeder Zeile jeweils einen Button "Add Item" und "RemoveRow" habe, die in sich funktionieren: Anlegen einer neuen Zeile, und löschen der Zeile mit gedrücktem "Remove Row".

Aber:
In der neu angelegten Zeile: Die neuen Buttons haben keine Benamsung (Add Item / Remove Row) und haben keine funktionalität ... :-(

Hier bräuchte ich jetzt eure Hilfe: wie kriege ich die neu angelegten Buttons zum fliegen, das sie tun, was sie tun sollen ....

Danke für eure Unterstützung,

Oliver

 

[Yaslaw]

Mal vornweg.
Was macht der HTML-Teil innerhalb des script-Tags? Da gehört kein HTML hinein

 

[Sempervivum]

Die neuen Buttons haben keine Benamsung (Add Item / Remove Row)

Das liegt daran, dass das value beim Anlegen der neuen Zeile gelöscht wird durch dieses:
row.find('input').not('[readonly]').val('');
Lösung indem Du die Buttons ebenfalls vom Löschen ausschließt:
row.find('input').not('[readonly]').not('button').val('');

haben keine funktionalität

Offensichtlich werden die Eventlistener beim Klonen nicht mit übernommen. Laut Doku kannst Du das beheben, indem Du den Parameter "withDataAndEvents" auf true setzt:
.clone() | jQuery API Documentation

 

[borgplasma]

Whow, ihr seid ja schnell

Vielen Dank für eure Hilfe !!
@Yaslaw:
Du hast recht, ist im original auch nicht so. Das habe ich leider beim kopieren hier fehlerhaft reingestellt, mea culpa ...

@Sempervivum:
Vielen Dank wiederum für deine Hilfe. jedoch will es leider noch nicht funzen:

[... HTML Tabelle ...]
                   <td><input type='button' class='AddNew' value='Add new item'></td>
                   <td><input type='button' class='Remove' value='Remove item'></td>
[... HTML Tabelle Ende...]

<script type="text/javascript">

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').not('[readonly]').not('button').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).addClass('AddNew').val('Add new item');
});

$('.Remove').click(function(){
   var row = $(this).closest('tr').remove();
   row.find('input').not('[readonly]').not('button').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).addClass('Remove').val('Remove item');
 });

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});
$('table').on('click', '.AddNew', function(){
  $(this).closest('tr').clone(true);
});

</script>

Ergebniss ist immer noch gleich, Buttons sind da (zumindest nun beschriftet), haben aber keine funktionalität (wenn ich klicke, machen sie nix. Die betshenden Buttons funktionieren, nur die neuen nicht ...)

Hättest du noch ne Idee?

Schöne Grüße
Oliver

 

[Sempervivum]

Wahrscheinlich liegt es daran, dass ich nicht daran gedacht hatte, dass ja die ganze Zeile geklont wird und der Button "tief" darin liegt, d. h. Du musst auch die Option mit "deep" setzen:
clone(true, true);

 

[borgplasma]

Hi, nee, an sowas hab ich gar nicht gedacht. Aber: auch mit der erweiterung leider immer noch gleiches Ergebniss ... :-/

Vielen Dank für deine Hilfe,
Oliver

 

[Sempervivum]

Auch bei dem value der Buttons hatte ich nicht genau hingeschaut: "button" ist ja nicht der Tagname sondern der Typ.
Ich habe mal ein Demo gemacht und so sollte alles funktionieren:

    <table>
        <tr>
            <td><input></td>
            <td><input type="button" class="RemoveRow" value="Remove item"></td>
            <td><input type="button" class="AddNew" value="Add new item"></td>
        </tr>
    </table>
    <script type="text/javascript">

        $('.AddNew').click(function () {
            var row = $(this).closest('tr').clone(true, true);
            row.find('input').not('[readonly]').not('[type="button"]').val('');
            $(this).closest('tr').after(row);
        });

        $('table').on('click', '.RemoveRow', function () {
            $(this).closest('tr').remove();
        });

    </script>

 

[borgplasma]

Juchuu, das wars, diese Lösung funktioniert wie gewünscht

Vielen Dank nochmals für die Hilfe und Mühen !!!!!!!!!!!!!!!!!!!