单击行上的编辑按钮将行数据检索到模态输入

时间:2017-04-27 12:49:07

标签: javascript jquery dom

当我点击与我想用来填充表单的字段相同的行中的“编辑”按钮时,我很难用表数据填充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">&times;</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>

单击按钮,当模式显示时,字段仍为空。 任何解决方案/帮助将不胜感激。 感谢

0 个答案:

没有答案