我試圖創建一個動態的編輯表單。用戶可以添加更多行或刪除行。在動態輸入字段中顯示多行
我的php沒有問題。問題出在My Jquery上。
這裏是我的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>
這裏是我的Jquery
<?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>
所以,這裏是第一次頁面加載我的問題。的看法是這樣的
然後在這裏是當我點擊Tambah Baris Baru
第二排走了什麼發生。編號是錯誤的。
這發生什麼事,當我點擊Hapus Baris
它的正常工作。但編號是錯誤的。
那麼,我該如何解決它?對不起,我的英語不好。謝謝。
的jsfiddle https://jsfiddle.net/0z2fcg39/
把你的代碼的快速視圖我會說這是一個在增量問題,當您添加或減去VAR我 – Icewine
我想是這樣。但我試圖給出一個來自細節的'totaldata'的值。 – YVS1102
請檢查我的小提琴https://jsfiddle.net/0z2fcg39/ – YVS1102