asp。从表行读取的net mvc弹出模式

Question

我可以成功地将所选表行读取到弹出模式，但如果我要将按钮移动到从javascript动态读取表行，则我的所有字段都将变为空或未读取所选表。

这里是我的Javascript，它与我的按钮更新一起构建我的表行，以调用弹出模式：

 $.get("/Home/GetItem", function (data) {
    tempDIM = JSON.parse(data);
    if (tempDIM[0]["status"] == "SUCCESS") {
        for (var i = 1; i < tempDIM.length - 1; i++) {
            $("#TableBody").append("<tr>" +
                "<th scope='row'>" + (i + 1) + "</th>" +
                "<td id='" + tempDIM[i]["id"] + "'>" + tempDIM[i]["id"] + "</td>" +
                "<td>" + tempDIM[i]["name"] + "</td>" +
                "<td>" + tempDIM[i]["address"] + "</td>" +
                "<td>" + tempDIM[i]["age"] + "</td>" +
                "<td>" + tempDIM[i]["status"] + "</td>" +
                '<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Update</button></td>' +                        
                "</tr > ");
        }
    }
});

情态动词：

<table class="table" style="margin-top:10px">
        <thead>
            <tr>                    
                <th>id</th>
                <th>name</th>
                <th>address</th>
                <th>age</th>
                <th>status</th>
            </tr>
        </thead>
    </table>



   <table class="table table-striped" id="tBody">
       <tbody id="TableBody"></tbody>
    </table>



 <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-target="#exampleModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><b>Update Selected Details</b></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>id:</label>
                        <input type="text" id="id" disabled />
                    </div>
                    <div class="form-group">
                        <label>name :</label>
                        <input type="text" id="name" disabled />
                    </div>
                    <div class="form-group">
                        <label>address :</label>
                        <input type="text" id="address" disabled />
                    </div>
                    <div class="form-group">
                        <label>age:</label>
                        <input type="text" id="age" disabled />
                    </div>
                    <div class="form-group">
                        <label>status:</label>
                        <input type="text" id="status" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="btnSave" onclick="SaveChanges()" class="btn btn-primary" data-dismiss="modal">Save changes</button>

                </div>
            </div>
        </div>
    </div>

还有我读表格的脚本：

 $(function () {
        $(".btn").click(function () {

            var $row = $(this).closest("tr"),       // Finds the closest row <tr>
                $tds = $row.find("td");             // Finds all children <td> elements

            $("#id").val($row.find('td:eq(0)').text())
            $("#name").val($row.find('td:eq(1)').text())
            $("#address").val($row.find('td:eq(2)').text())
            $("#age").val($row.find('td:eq(3)').text())
            $("#status").val($row.find('td:eq(4)').text())

        });
    }); 

为什么我从弹出模式中得到空值的任何建议或评论。TIA

Answer 1

假设您的表包含正确的数据，$（". btn"）. Click（）事件处理程序似乎是错误的，因为您可能会调用具有class="btn"的其他按钮表行之外（即

$("#exampleModal").on('show.bs.modal', function (e) {
    var $button = $(e.relatedTarget);
    var $row = $button.closest("tr");
    var $tds = $row.find("td");

    $.each($tds, function(i, value) {
        $("input:eq(" + i + ")").val($(this).text());
    });
});

注意：如果要在模式内提交文本框值，请避免使用阻止发布值的属性，使用只读属性，例如

工作示例（简化）：。网络小提琴

相关问题：

单击表格行上的按钮并在模式窗口中显示值