gpt4 book ai didi

javascript - 在动态输入字段中显示多行

转载 作者:行者123 更新时间:2023-12-02 14:00:04 25 4
gpt4 key购买 nike

我正在尝试创建一个动态的编辑表单。用户可以添加更多行或删除行。

我的php.ini没有问题。问题出在我的 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>&nbsp;&nbsp;&nbsp;<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>

所以,这是我第一次加载页面时遇到的问题。 View 是这样的

enter image description here

然后,当我点击 Tambah Baris Baru

时会发生什么

enter image description here

第二行消失了。而且编号错误。

这就是当我点击Hapus Baris时发生的事情

enter image description here

它按预期工作。但编号是错误的。

那么,我该如何解决这个问题呢?对不起,我的英语不好。谢谢。

JsFiddle https://jsfiddle.net/0z2fcg39/

最佳答案

正如您所怀疑的那样,问题在于 i 的值。在第一次执行期间,i 的值为 2,它已经具有第二行,它会用新添加的行覆盖它(slno 3)。

$(document).ready(function() {

var i = 2;
$("#add_row").click(function() {
i++;
var $tr = $('<tr id="ke' + i + '"></tr>').appendTo('#example1');

$tr.html("<td>" + (i) + "</td><td><select name='nip[]' class='form-control'>" +
"<option> -- </option>" +
"<option value='0600260'> [0600260] - [ZAENAL ABIDIN] </option>" +
"<option value='0802781'> [0802781] - [SATIBI ] </option>" +
"<option value='0903380'> [0903380] - [JUDY SJARIP] </option>" +
"<option value='1105605'> [1105605] - [YULIANTI HENDARSIH] </option>" +
"<option value='1106975'> [1106975] - [ABDUL ROCHIM] </option>" +
"<option value='120442130008'> [120442130008] - [CHOIRUL ILYAS] </option>" +
"<option value='1207246'> [1207246] - [ACHMAD MAULANA] </option>" +
"<option value='123456'> [123456] - [Test] </option>" +
"<option value='1309713'> [1309713] - [LITICIA SOCA LAWRENDRA ] </option>" +
"<option value='1411097'> [1411097] - [RAMDAN NUR] </option>" +
"<option value='1411517'> [1411517] - [JULIMAN YASONASA GEA ] </option>" +
"<option value='1411795'> [1411795] - [NOVIANTO CHRIS HENDARWAN] </option>" +
"<option value='1412021'> [1412021] - [WALUYO SUPRIADI] </option>" +
"<option value='1412717'> [1412717] - [ADDINUL FAUZAN ] </option>" +
"<option value='1412774'> [1412774] - [ABDUL FATAH] </option>" +
"<option value='1500575'> [1500575] - [BAGUS SUSETYO] </option>" +
"<option value='1500701'> [1500701] - [AHMAT SUPARDI] </option>" +
"<option value='1501815'> [1501815] - [KHAIRUNNAS ] </option>" +
"<option value='1501971'> [1501971] - [SHELLY DINI DEBYANZAH] </option>" +
"<option value='1502017'> [1502017] - [CHOIRUL ILYAS] </option>" +
"<option value='1602762'> [1602762] - [BOBY KURNIAWAN] </option>" +
"<option value='1603240'> [1603240] - [TOTO MARYOTO] </option>" +
"</select> </td>");
});

$("#delete_row").click(function() {
if (i > 1) {
$("#ke" + i).remove();
i--;
}
});


});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://localhost:84/payroll2/dinas_ho_other/save" method="post" accept-charset="utf-8" class="form-horizontal" id="" enctype="multipart/form-data">
<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="2016-11-08" 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">TEST 2</textarea>
</div>
</div>

<table width="100%" id="example1" class="table table-bordered table-striped">
<tr>
<td>
No.
</td>
<td>Nama Lengkap</td>

</tr>


<tr id='ke1'>
<td>1</td>
<td>
<select name="nip[]" class="form-control select2">
<option>--</option>
<option value="0600260">[0600260] - [ZAENAL ABIDIN]</option>
<option value="0802781">[0802781] - [SATIBI ]</option>
<option value="0903380">[0903380] - [JUDY SJARIP]</option>
<option value="1105605">[1105605] - [YULIANTI HENDARSIH]</option>
<option value="1106975">[1106975] - [ABDUL ROCHIM]</option>
<option value="120442130008">[120442130008] - [CHOIRUL ILYAS]</option>
<option value="1207246">[1207246] - [ACHMAD MAULANA]</option>
<option value="123456">[123456] - [Test]</option>
<option value="1309713">[1309713] - [LITICIA SOCA LAWRENDRA ]</option>
<option value="1411097">[1411097] - [RAMDAN NUR]</option>
<option value="1411517">[1411517] - [JULIMAN YASONASA GEA ]</option>
<option value="1411795">[1411795] - [NOVIANTO CHRIS HENDARWAN]</option>
<option value="1412021">[1412021] - [WALUYO SUPRIADI]</option>
<option value="1412717">[1412717] - [ADDINUL FAUZAN ]</option>
<option value="1412774">[1412774] - [ABDUL FATAH]</option>
<option value="1500575">[1500575] - [BAGUS SUSETYO]</option>
<option value="1500701">[1500701] - [AHMAT SUPARDI]</option>
<option value="1501815">[1501815] - [KHAIRUNNAS ]</option>
<option selected value="1501971">[1501971] - [SHELLY DINI DEBYANZAH]</option>
<option value="1502017">[1502017] - [CHOIRUL ILYAS]</option>
<option value="1602762">[1602762] - [BOBY KURNIAWAN]</option>
<option value="1603240">[1603240] - [TOTO MARYOTO]</option>
</select>
</td>
</tr>

<tr id='ke2'>
<td>2</td>
<td>
<select name="nip[]" class="form-control select2">
<option>--</option>
<option value="0600260">[0600260] - [ZAENAL ABIDIN]</option>
<option value="0802781">[0802781] - [SATIBI ]</option>
<option value="0903380">[0903380] - [JUDY SJARIP]</option>
<option value="1105605">[1105605] - [YULIANTI HENDARSIH]</option>
<option value="1106975">[1106975] - [ABDUL ROCHIM]</option>
<option value="120442130008">[120442130008] - [CHOIRUL ILYAS]</option>
<option value="1207246">[1207246] - [ACHMAD MAULANA]</option>
<option value="123456">[123456] - [Test]</option>
<option value="1309713">[1309713] - [LITICIA SOCA LAWRENDRA ]</option>
<option value="1411097">[1411097] - [RAMDAN NUR]</option>
<option value="1411517">[1411517] - [JULIMAN YASONASA GEA ]</option>
<option value="1411795">[1411795] - [NOVIANTO CHRIS HENDARWAN]</option>
<option value="1412021">[1412021] - [WALUYO SUPRIADI]</option>
<option value="1412717">[1412717] - [ADDINUL FAUZAN ]</option>
<option selected value="1412774">[1412774] - [ABDUL FATAH]</option>
<option value="1500575">[1500575] - [BAGUS SUSETYO]</option>
<option value="1500701">[1500701] - [AHMAT SUPARDI]</option>
<option value="1501815">[1501815] - [KHAIRUNNAS ]</option>
<option value="1501971">[1501971] - [SHELLY DINI DEBYANZAH]</option>
<option value="1502017">[1502017] - [CHOIRUL ILYAS]</option>
<option value="1602762">[1602762] - [BOBY KURNIAWAN]</option>
<option value="1603240">[1603240] - [TOTO MARYOTO]</option>
</select>
</td>
</tr>


</table>
<div><a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a>&nbsp;&nbsp;&nbsp;<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>

关于javascript - 在动态输入字段中显示多行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40478227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com