jquery - 如何使用jquery动态自动填充添加/删除字段？
问题描述
我正在使用 laravel 做一个程序。我在 jquery 中使用添加/删除字段。第一个字段从数据库中获取数据以列出人名。
<div class="container table-responsive col-lg-10">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-hover table-responsive table-bordered" id="user_table">
<thead>
<tr>
<td class="text-center col-lg-3">Nama</th>
<td class="text-center col-lg-2">No Personal</th>
<td class="text-center col-lg-1">Jabatan</th>
<td class="text-center col-lg-1">Telefon</th>
<td class="text-center col-lg-1">Ext</th>
<td class="text-center col-lg-1">Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="right"> </td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<script>
$(document).ready(function(){
var count = 1;
dynamic_field(count);
function dynamic_field(number)
{
html = '<tr>';
html += '<td><select id="nama" name="nama[]" class="form-control"><option value="">--Pilih--</option><?php foreach($staff as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
html += '<td><input type="text" name="no_personal[]" class="form-control" /></td>';
html += '<td><input type="text" name="jabatan[]" class="form-control" /></td>';
html += '<td><input type="text" name="telefon[]" class="form-control" /></td>';
html += '<td><input type="text" name="ext[]" class="form-control" /></td>';
if(number > 1)
{
html += '<td class="text-center"><button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td class="text-center"><button type="button" name="add" id="add" class="btn btn-success">Tambah Pegawai</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('change', '.nama', function(){
var staffID = jQuery(this).val();
if(staffID)
{
jQuery.ajax({
url : 'add_demo/get_staff/'+staffID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
$('#no_personal').val(data.Nobadan);
$('#jabatan').val(data.SectionID);
$('#telefon').val(data.notelttp);
$('#ext').val(data.ext);
}
});
}
else
{
$('#no_personal').empty();
$('#jabatan').empty();
$('#telefon').empty();
$('#ext').empty();
}
});
$(document).on('click', '#add', function(){
count++;
dynamic_field(count);
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
});
</script>
我编辑了js代码：
function dynamic_field(number)
{
html = '<tr>';
html += '<td><select id="nama_'+ count +'" name="nama[]" class="form-control"><option value="">Pilih</option><?php foreach($pegawai as $key => $value):echo '<option value="'.$key.'">'.addslashes($value).'</option>'; endforeach; ?></select></td>';
html += '<td><input id="nb_'+ count +'" type="text" name="no_badan[]" class="form-control" value="nb_'+ count +'" /></td>';
html += '<td><input id="sek_'+ count +'" type="text" name="seksyen[]" class="form-control" /></td>';
html += '<td><input id="tel_'+ count +'" type="text" name="telefon[]" class="form-control" /></td>';
html += '<td><input id="ext_'+ count +'" type="text" name="ext[]" class="form-control" /></td>';
if(number > 1)
{
html += '<td class="text-center"><button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td class="text-center"><button type="button" name="add" id="add" class="btn btn-success">Tambah</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('change', '.nama_'+ count +'', function(){
var staffID = jQuery(this).val();
if(staffID)
{
jQuery.ajax({
url : 'add_demo/get_sta/'+staffID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
$('#nb_'+ count +'').val(data.Nobadan);
$('#seksyen').val(data.SectionID);
$('#telefon').val(data.notelttp);
$('#ext').val(data.ext);
}
});
}
else
{
$('#nb_'+ count +'').empty();
$('#seksyen').empty();
$('#telefon').empty();
$('#ext').empty();
}
});
$(document).on('click', '#add', function(){
count++;
dynamic_field(count);
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
});
</script>
When the first field（staff name）selected，the information about no_personal, jabatan, telefon and ext will be filled automatically into the field. 使用此 ajax url 获取的信息：
url : 'add_demo/get_staff/'+staffID,
控制器是：
$data = staffs::where('staffID', $staffID)
->select('staffs.No_pers', 'staffs.JabID', 'staffs.notel', 'staffs.ext')
->first();
return json_encode($data);
我可以在选择框中列出员工姓名。但是当我选择员工姓名时，信息并没有填写到字段中。
该字段已被赋予如下 id：
html += '<td><input id="nb_'+ count++ +'" type="text" name="no_badan[]" class="form-control" /></td>';
如何即兴编写代码？我试图将 id 放在添加的字段中，但它会为添加的字段提供相同的 id 名称错误。
解决方案
有最简单的方法来创建这样的组件。请看我下面给出的代码片段。
$(document).on('click','.add',function(){
var clonned = $(this).parents('.clonable:last-child').clone();
parentId = clonned.attr('parentId');
clonned.attr('parentId',parseInt(parentId)+1);
clonned.find('input[type="text"]').each(function(){
return $(this).val('');
})
$('.clonable').parents('tbody').append(clonned);
});
$(document).on('click','.remove',function(){
$(this).parents('.clonable').remove();
});
$(document).on('change', '.nama', function(){
var staffID = $(this).val();
var parentId = $(this).parents('.clonable').attr('parentId');
if(staffID){
jQuery.ajax({
url : 'add_demo/get_staff/'+staffID,
type : "GET",
dataType : "json",
success:function(data){
console.log(data);
$('tr[parentId="'+parentId+'"] input[name="no_personal[]"]').val(data.Nobadan);
$('tr[parentId="'+parentId+'"] input[name="jabatan[]"]').val(data.SectionID);
$('tr[parentId="'+parentId+'"] input[name="telefon[]"]').val(data.notelttp);
$('tr[parentId="'+parentId+'"] input[name="ext[]"]').val(data.ext);
}
});
}else{
$('tr[parentId="'+parentId+'"] input[name="no_personal[]"]').val('');
$('tr[parentId="'+parentId+'"] input[name="jabatan[]"]').val('');
$('tr[parentId="'+parentId+'"] input[name="telefon[]"]').val('');
$('tr[parentId="'+parentId+'"] input[name="ext[]"]').val('');
}
});.clonable .add{
display: none;
}
.clonable:last-child .add{
display: inline-block !important;
}
.clonable:only-child .remove{
display: none !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container table-responsive col-lg-10">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-hover table-responsive table-bordered" id="user_table">
<thead>
<tr>
<th class="text-center col-lg-3">Nama</th>
<th class="text-center col-lg-2">No Personal</th>
<th class="text-center col-lg-1">Jabatan</th>
<th class="text-center col-lg-1">Telefon</th>
<th class="text-center col-lg-1">Ext</th>
<th class="text-center col-lg-1">Action</th>
</tr>
</thead>
<tbody>
<tr class="clonable" parentId="1">
<td>
<select id="nama" name="nama[]" class="form-control nama">
<option value="">--Pilih--</option>
<?php foreach($staff as $key => $value){?>
<option value="<?=$key?>"><?=addslashes($value)?></option>
<?php }?>
</select>
</td>
<td><input type="text" id="no_personal" name="no_personal[]" class="form-control" /></td>
<td><input type="text" id="jabatan" name="jabatan[]" class="form-control" /></td>
<td><input type="text" id="telefon" name="telefon[]" class="form-control" /></td>
<td><input type="text" id="ext" name="ext[]" class="form-control" /></td>
<td class="text-center">
<button type="button" name="remove" id="" class="btn btn-danger remove">Batal</button>
<button type="button" name="add" id="add" class="btn btn-success add">Tambah Pegawai</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" align="right"> </td>
</tr>
</tfoot>
</table>
</form>
</div>推荐阅读
- asp.net-web-api - 避免 Web API 查询字符串参数中的 SQL 注入
- amazon-web-services - 如何在 AWS CodeBuild 中运行我的 jenkins 管道代码？
- javascript - 从 span 的数据元素创建 json 数组
- logging - 如何使用 Stackdriver 在 GCS 中归档/清除日志？
- python - Pandas：条件替换为集合
- reactjs - Sorting Columns reactjs table
- c++ - 为什么 clang 不允许通过实例访问嵌套的枚举类？
- python - python2和python3中的Pytest - 不同的行为
- express - KeystoneJS 中的静态资产路由问题
- android - 替换片段非常慢