I got a table where I want to add additional rows when clicking on a selector on the end of the row. I found a solution here: jQuery Clone table row
The pure clone of the row is perfekt. But afterwords I can't clone the clone with clicking on the selector of the end of the cloned row. I only does clone when I klick on a selector of a row which is hardcoded and not cloned.
Here is the code of the html/php:
<table class="table table-bordered table-hover">
<tr>
<th id="col1">Datum / Anzahl</th>
<th id="col2">Text</th>
<th id="col3">Einzelpreis</th>
<th id="col4">Gesamtpreis</th>
</tr>
<!-- Einzelpositionen -->
<tr>
<td align="left" class="editCell">
<span class="input">
<input type="text" value="<?php echo $eventDatum ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</td>
<td align="left" class="editCell">
<span class="input">
<input type="text" value="<?php echo $eventTxt ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span>
</td>
<td align="right" class="editCell">
<span class="input">
<input type="text" text-align="right" value="<?php echo $ePreis ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span> <?=$waehrung ?>
</td>
<td align="right" class="editCell">
<span class="input">
<input type="text" text-align="right" value="<?php echo $gPreis ?>">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</span> <?=$waehrung ?>
</td>
<td class="no-border">
<span class="glyphicon glyphicon-plus" aria-hidden="true">plus</span>
</td>
</tr>
<!-- Summen und MwSt -->
<tr>
<td align="right" colspan="3">Zwischensumme</td>
<td align="right">
<span class="text"><?php echo $nettoSum ?></span>
<span class="input">
<input type="hidden" text-align="right" value="<?php echo $nettoSum ?>">
</span> <?=$waehrung ?>
</td>
</tr>
<tr>
<td align="right" colspan="3">Mehrwertsteuer 19%</td>
<td align="right">
<span class="text"><?php echo $vat ?></span>
<span class="input">
<input type="hidden" text-align="right" value="<?php echo $vat ?>">
</span> <?=$waehrung ?>
</td>
</tr>
<tr>
<th style="text-align: right !important" colspan="3">Rechnungsbetrag</th>
<th style="text-align: right !important">
<span class="text"><?php echo $bruttoSum ?></span>
<span class="input">
<input type="hidden" text-align="right" value="<?php echo $bruttoSum ?>">
</span> <?=$waehrung ?>
</th>
</tr>
</table>
And here the code of the jquery:
$('.glyphicon-plus').click(function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find(':text').val('');
$clone.find('span.text').after('-kopie');
$tr.after($clone);
});
My fist entry on fiddle will hopefully work ;-) http://jsfiddle.net/8v35m2c1/
Hope to get some ideas. The code are just parts of my original files ;-)
Cheers, Chris
You need to use the on function instead of click to ensure that new rows also get the event handler:
$('table').on('click', '.glyphicon-plus', function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find(':text').val('');
$clone.find('span.text').after('-kopie');
$tr.after($clone);
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments