当我点击与我想用来填充表单的字段相同的行中的“编辑”按钮时,我很难用表数据填充bootstrap模式。
我的表
<div class="table-responsive">
<table class="table table-bordered table-striped fiveColTable" id="permissiontable">
<thead>
<tr>
<th class="text-center hidden">permission Id</th>
<th class="text-center" title="Permission"><i class="fa fa-user-times fa-lg" aria-hidden="true"></i> <span>Permission</span></th>
<th class="text-center" title="Application Name"><i class="fa fa-th fa-lg" aria-hidden="true"></i> <span>Application</span></th>
<th class="text-center" title="Status"><i class="fa fa-flag fa-lg" aria-hidden="true"></i> <span>Status</span></th>
<th></th>
</tr>
</thead>
<tbody>
<th:block th:unless="${#lists.isEmpty(permissionList)}">
<tr th:each="permission ,iterStat: ${permissionList}" th:id="'permList' + ${iterStat.count}">
<td class="text-center permissionid hidden" th:text="${permission.permissionid}"><input/></td>
<td class="text-center permissiontype" th:text="${permission.permissiontype}">Amandi Admin</td>
<td class="text-center permissionapplication" th:text="${permission.permissionapplication.applicationname}">amandi@amandico.net</td>
<td class="text-center permissionstatus" th:text="${permission.permissionstatus.statusname}">amandi@amandico.net</td>
<td class="text-center last">
<button class="btn btn-default btn-sm edit">
<i class="fa fa-pencil fa-fw"></i>
</button>
<button class="btn btn-default btn-sm" id="delete" onclick="deletePermission()">
<i class="fa fa-trash-o fa-fw"></i>
</button>
</td>
</tr>
</th:block>
</tbody>
</table>
</div>
我的模态
<!-- Modal -->
<div class="modal fade" id="editPermissionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel ">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Permission</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group"><label class="col-sm-2 control-label">Permission</label>
<div class="col-sm-10"><input type="text" id="permissiontype" class="form-control permissiontype"></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label">Application</label>
<div class="col-sm-10"><input type="text" id="permissionapplication" class="form-control permissionapplication"></div>
</div>
<div class="form-group"><label class="col-lg-2 control-label">Status</label>
<div class="col-sm-10"><input type="text" id="permissionstatus" class="form-control permissionstatus"></div>
</div>
<div class="col-sm-10"><input type="text" class="hidden form-control permissionid"></div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-2">
<button class="btn btn-default" type="reset"><i class="fa fa-refresh" aria-hidden="true"></i> Reset</button>
<button class="btn btn-primary" type="submit"><i class="pe-7s-diskette" aria-hidden="true"></i> Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal Ends-->
最后我的js
<script>
$(".edit").click(function(){
$('#editPermissionModal').modal('show');
var pid = $(this).closest('tr').find('td:eq(0)').text();
var ptype = $(this).closest('tr').find('td:eq(1)').text();
var papp = $(this).closest('tr').find('td:eq(2)').text();
var pstatus = $(this).closest('tr').find('td:eq(3)').text();
$('#permissionid').val(pid);
$('#permissiontype').val(ptype);
$('#permissionapplication').val(papp);
$('#permissionstatus').val(pstatus);
});
</script>
单击按钮,当模式显示时,字段仍为空。 任何解决方案/帮助将不胜感激。 感谢