Question

我有一个数据表，我希望能够使用Jquery或任何其他方式显示对话框，以使用相应的行值进行编辑，我已经尝试了下面的代码，已经在网上做了一些研究，但是没有运气，我会感谢有人可以提供指导，帮助或建议如何实现这一目标

我的桌子：

<pre> <table id="tblAppointment" class="table table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th>Matric/RegNo</th>
                        <th>Patient's Name</th>
                        <th>Visit Date</th>
                        <th>Appointment Date</th>
                        <th>Reason(s)</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                    @foreach (var item in Model)
                    {
                        <tr>
                            <td class="hidden-xs">
                                @item.MatricRegNo
                            </td>
                            <td class="hidden-xs">
                                @item.PatientName
                            </td>
                            <td class="hidden-xs">
                                @item.EntryDate
                            </td>
                            <td class="hidden-xs">
                                @item.AppointmentDate
                            </td>
                            <td class="hidden-xs">
                                @item.Reasons
                            </td>
                            <td>

                                <span class="btn btn-info btn-sm edit" style="cursor:pointer;" data-toggle="modal" data-target="#modal-Edit"></span>
                            </td>
                        </tr>
                    }
                </tbody>

我的模态对话框：

<div class="modal fade" id="modal-Edit">
                <div class="modal-dialog">
                    <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">Edit Appointments</h4>
                        </div>
                        @using (Html.BeginForm())
                        {                                
                            <div class="modal-body">

                                <div class="form-horizontal">
                                    <div class="form-group" style="display:none;">
                                        <label id="lblAppointmentIdEdit" class="control-label col-md-2">AppointmentId:</label>
                                        <div class="col-md-10">
                                            <input type="text" value="" id="AppointmentIdEdit" name="AppointmentIdEdit" class="form-control appointmentIdEdit" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label id="lblPatientRegNoEdit" class="control-label col-md-2">RegNo:</label>
                                        <div class="col-md-10">
                                            <input type="text" value="" id="patientRegNoEdit" name="patientRegNoEdit" class="form-control patientRegNoEdit" />

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label id="appointmentDateEdit" class="control-label col-md-2">Date:</label>
                                        <div class="col-md-10">
                                            <div class='input-group date' id='datetimepickerEdit'>
                                                <input type='text' class="form-control datetimepickerEdit" id="appointmentDateEdit" name="appointmentDateEdit" value="" />
                                                <span class="input-group-addon datetimepicker-addonEdit">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label id="lblReasonsEdit" class="control-label col-md-2">Reason(s):</label>
                                        <div class="col-md-10">
                                            <textarea rows="4" cols="50" id="reasonsEdit" name="reasonsEdit" class="form-control reasonsEdit"></textarea>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        }
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                            <button type="submit" id="UpdateButton" name="UpdateButton" class="btn btn-primary update">Update</button>
                        </div>
                    </div>

                </div>

            </div>

jQuery函数：

<script type="text/javascript">
$('.edit').on('click', function () {
    var myModal = $('#modal-Edit');
    var AppointmentIdEdit = $(this).closest('tr').find('td.AppointmentIdEdit').html();
    var matricRegNo = $(this).closest('tr').find('td.MatricRegNo').html();
    var appointmentDate = $(this).closest('tr').find('td.AppointmentDate').html();
    var reasons = $(this).closest('tr').find('td.Reasons').html();

    $('.appointmentIdEdit', myModal).val(AppointmentIdEdit);
    $('.matricRegNoEdit', myModal).val(matricRegNo);
    $('.datetimepickerEdit', myModal).val(appointmentDate);
    $('.reasonsEdit', myModal).val(reasons);
myModal.modal({ show: true });
return false;
});

Answer 1

制作一个javascript函数，然后单击以获取模态上需要显示的所有值。您可以对此应用不同的方法。使用.val（）、. attr（）可以获取值并使用javascript附加在模态上。

Answer 2

我能够使用以下Jquery函数进行解析：

<script type="text/javascript">
$(document).ready(function () {

$(".edit[data-target='#modal-Edit']").click(function () {
    var columnHeadings = $("thead th").map(function () {
        return $(this).text();
    }).get();
    columnHeadings.pop();
    var columnValues = $(this).parent().siblings().map(function () {
        return $(this).text();
    }).get();
    var myModal = $('#modal-Edit');
    $('#AppointmentIdEdit', myModal).val(columnValues[0].trim());
    $('#patientRegNoEdit', myModal).val(columnValues[1].trim());
    $('.appointmentDateEdit', myModal).val(columnValues[4].trim());
    $('#reasonsEdit', myModal).val(columnValues[5].trim());
    //console.log("Column Values: " + columnValues[5]);

    myModal.modal({ show: true });
    return false;
});
$('.modal-footer .update').click(function () {
    $('form[name="modalForm"]').submit();
});
});

如何检索数据表行并在模式对话框中显示以进行编辑

2 个答案: