Question

我正在编写一段代码，因为我对jquery或javascript没有太多经验，我需要你的帮助。我想在单击按钮EditBtn时从行中获取数据并将这些值设置为模态。我尝试了下面的代码，但它没有用。

以下是我的代码

表：

 <table id="example" class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Ödeme Türü</th>
            <th>Ödeme Başlığı</th>
            <th>İçerik</th>
            <th>Son Ödeme Tarihi</th>
            <th>Tutarı</th>
            <th>Ödeme Durumu</th>
            <th>Düzenle</th>
        </tr>
    </thead>
    <tbody>

        @foreach (OdemeList item in Model)
        {
            <tr id="@item.Odeme.OdemeID">

                <td>@item.Odeme.OdemeType</td>
                <td>@item.Odeme.OdemeTitle</td>
                <td>@item.Odeme.OdemeContent</td>
                <td>@item.Odeme.SonOdemeTarih</td>
                <td>@item.Odeme.OdemeTutar</td>
                @if (@item.KullaniciOdeme.isPay == true)
                {
                    <td>Odendi</td>
                }
                else
                {
                    <td>Odenmedi</td>
                    <td>
                        <form>
                            <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                                    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
                                    data-amount="@item.Odeme.OdemeTutar"
                                    data-name="@item.Odeme.OdemeTitle"
                                    data-image="/Content/LoginCssJs/pay.png"
                                    data-locale="auto">

                            </script>
                        </form>
                    </td>
                    @*<td>
                            <a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
                        </td>*@
                }
                <td>
                    <a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="@Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
                </td>
                <td>
                    <a data-toggle="modal" data-target=".bootstrapmodal2"><img src="@Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
                </td>
            </tr>

        }

    </tbody>
</table>

我的模式：

<div class="modal fade bootstrapmodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close"><span>&times;</span></button>
                <div class="modal-title">
                    <h3>Ödeme Düzenle</h3>
                </div>
            </div>
            <div class="modal-body">
                <form>
                    <label>Ödeme Türü</label>
                    <select class="form-control" id="OdemeTuru">
                        <option>Aidat</option>
                        <option>Isınma</option>
                        <option>Bina Gideri</option>
                    </select><br />
                    <div class="form-group">
                        <label for="odemebasligi">Ödeme Başlığı</label>
                        <input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
                    </div>
                    <div class="form-group">
                        <label for="comment">Ödeme içeriği</label>
                        <textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount">Tutar</label>
                        <div class="input-group">
                            <div class="input-group-addon">TL</div>
                            <input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="odemetarihi">Son Ödeme Tarihi</label>
                        <input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Kaydet</button>
                <button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
            </div>
        </div>
    </div>
</div>

脚本：

<script>
    $('a.edit').on('click', function() {
        var myModal = $('.bootstrapmodal');
        //// now get the values from the table
        //var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
        var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
        var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
        var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
        var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();

        //// and set them in the modal:
        //$('#', myModal).val(OdemeTuru);
        $('#odemebasligi', myModal).val(OdemeBaslik);
        $('#comment', myModal).val(OdemeIcerik);
        $('#exampleInputAmount', myModal).val(OdemeTutar);
        $('#odemetarihi', myModal).val(SonOdemeTarihi);
        // and finally show the modal
        myModal.modal({ show: true });

        return false;
    });
</script>

Answer 1

在script中，您定位<td>类.find('td.OdemeTitle')，并且在表格中没有定义<td>@item.Odeme.OdemeTitle</td>类，您只需要定义您要定位的类，例如

对于

var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();

HTML

<td class="OdemeTitle">@item.Odeme.OdemeTitle</td>

按照上面的示例并设置所有<td>类，您将全部设置。

minimal fiddle example

无法从表中获取数据并设置为bootstrap模式

1 个答案: