Ich versuche ein Bearbeitungsformular zu erstellen, das dynamisch ist. Der Benutzer kann weitere Zeilen hinzufügen oder Zeilen löschen.Mehrere Zeilen im dynamischen Eingabefeld anzeigen
Es gibt kein Problem in meinem PHP. Das Problem ist in My Jquery.
Hier ist mein HTML
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
echo form_open_multipart($controller.'/save',$attributes);
?>
<div class="form-group">
<label class="col-sm-3 control-label">Attendance Date </label>
<div class="col-sm-7">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="datetimepicker_mask" type="text" value="<?=inggris_date($master->startdate)?>" readonly name="attendance_date" class="form-control"/>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Keterangan</label>
<div class="col-sm-5">
<textarea class="form-control" required name="keterangan"><?=$master->keterangan;?></textarea>
</div>
</div>
<table width="100%" id="example1" class="table table-bordered table-striped">
<tr> <td>
No.
</td>
<td> Nama Lengkap </td>
</tr>
<?php
$x = 0;
foreach($detail as $det) {
$x++;
?>
<tr id = 'ke<?=$x;?>'>
<td> <?=$x;?> </td>
<td>
<select name="nip[]" class="form-control select2">
<option> -- </option>
<?php foreach($emp as $orang){ ?>
<option <?php if($det->nip == $orang->Nip) echo "selected"; ?> value="<?=$orang->Nip;?>"> [<?=$orang->Nip;?>] - [<?=$orang->FullName;?>] </option>
<?php } ?>
</select>
</td>
</tr>
<?php } ?>
</table>
<div><a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a> <a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a></div>
<br>
<br>
<div class="box-footer">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-info pull-right">Save</button>
</div><!-- /.box-footer -->
</form>
und hier meine JQuery ist
<?php $totaldata = count($detail); echo "Total data = ".$totaldata; ?>
<script type="text/javascript">
$(document).ready(function(){
var i=<?=$totaldata;?>;
$("#add_row").click(function(){
$('#ke'+i).html("<td>"+ (i+1) +"</td><td><select name='nip[]' class='form-control'>"+
"<option> -- </option>"+
<?php foreach($emp as $orang){ ?>
"<option value='<?=$orang->Nip;?>'> [<?=$orang->Nip;?>] - [<?=$orang->FullName;?>] </option>"+
<?php } ?>
"</select> </td>");
$('#example1').append('<tr id="ke'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#ke"+(i-1)).html('');
i--;
}
});
});
</script>
So, hier ist mein Problem aus dem ersten Mal, wenn die Seite zu laden. Die Aussicht ist wie dieser
Und dann ist hier, was passiert, wenn ich Tambah Baris Baru klicken
Die zweite Reihe ist verschwunden. Und die Nummerierung ist falsch.
Und das, was passiert, wenn ich klicke wie erwartet Hapus Baris
es ist Arbeit. Aber die Nummerierung ist falsch.
Also, wie kann ich es beheben? Entschuldigung für mein schlechtes Englisch. Vielen Dank.
JsFiddle https://jsfiddle.net/0z2fcg39/
einen schnellen Überblick über Ihren Code nehmen würde ich sagen, dass es ein in Schrittweite Problem ist, wenn Sie hinzufügen oder var Subtrahieren i – Icewine
ich denke so. Aber ich habe versucht, einen Wert mit "totaldata" zu geben, die aus dem Detail kommen. – YVS1102
Bitte überprüfen Sie meine Geige https://jsfiddle.net/0z2fcg39/ – YVS1102