个人中心
gpt4 book ai didi

javascript - Modal 内的表格每一行都填充，而不是单独填充

转载 作者：行者123 更新时间：2023-11-30 14:25:08 24 4
gpt4 key购买 nike

我在对象内部有数组，我想在模态中为每一行相应地填充特定数组(“Edu”)。因此，如果用户单击“信息”模式按钮，它应该只显示特定数组(“Edu”)。但是，我的所有数组都填充在每个模态中..

我认为我的问题是在追加表行时如何将数组的值放入表中。它将所有内容都放在同一个表体中。

有人会在这方面给我帮助或指导吗？我对 jQuery 没有太多经验，非常感谢您的帮助。

这是 HTML:

    <html>
    <head>
        <title>Hello Student</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

    </head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="parentTable">
      <thead>
        <tr class="category">
        <th></th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>

      <tbody id="parentTableBody">
      </tbody>
    </table>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <h3>Info</h3>
                            <div class="well well-sm overflow-auto">
                                <table class="table table-striped table-hover table-condensed" id="schoolTable">
                                    <thead>
                                    <tr>
                                        <th/>
                                        <th>School</th>
                                        <th>Grade</th>
                                        <th>Job</th>
                                        <th>Martial</th>
                                        <th>Etc</th>
                                    </tr>
                                    </thead>
                                    <tbody id="schoolModalBody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </body>
    </html>

这是 Javascript + jQuery:

    $(document).ready(function() {
      var arr1 = generateItem();
      if (arr1) {
        var arr2 = [].concat(arr1);
        var tr;
        $.each(arr2, function(i, e) {
          tr = $('<tr>');
          tr.append("<td>" + "<button id='modalBtn' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>");
          tr.append("<td>" + (e.Name || "") + "</td>");
          tr.append("<td>" + (e.Email || "") + "</td>");
          tr.append("<td>" + (e.Phone || "") + "</td>");
          $('#parentTableBody').append(tr);

         populateSchoolInfo(e);
        });

      }
    });
        function populateSchoolInfo(kid) {
        var tr;
                    $.each(kid.Edu, function(j, v){
                        tr = $('<tr>');
                        tr.append("<td>" + (v.School || "") + "</td>");
                        tr.append("<td>" + (v.Grade || "") + "</td>");
                        tr.append("<td>" + (v.Job || "") + "</td>");
                        tr.append("<td>" + (v.Martial || "") + "</td>");
                        tr.append("<td>" + (v.ETC || "") + "</td>");
                        $('#schoolModalBody').append(tr);
                        });
    }

    function generateItem() {
      var kids = [{
          Name: "Gina",
          Email: "gina@email.com",
          Phone: "211-456-1234",
          Edu:[{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "}]
        },
        {
          Name: "Mark",
          Email: "mark@email.com",
          Phone: "144-411-2312",
          Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
        },
        {
          Name: "Jake",
          Email: "jake@email.com",
          Phone: "333-211-1111",
          Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
        }
      ];
      return kids;
    }

jsfiddle

谢谢

最佳答案

So, if a user clicks on a "Info" modal button, it should only display that certain array ("Edu"). However, all of my arrays are populated in every modal..

发生这种情况是因为您在 dom 就绪时填充模态表。

您可以监听 show.bs.modal 事件以隐藏每一行并仅显示感兴趣的行。

添加的代码:

$('#myModal').on('show.bs.modal', function (e) {
     var idx = $(e.relatedTarget).closest('tr').index();
     $('#schoolModalBody tr').hide().eq(idx).show();
});

更新了 fiddle here

因为 ID 需要是唯一的，所以我建议在您的 for 循环中删除 id='modalBtn'，或者如果您不惜一切代价需要它们，我建议更改 for 循环中的按钮，例如:

id='modalBtn" + i + "'

$(document).ready(function() {
    var arr1 = generateItem();
    if (arr1) {
        var arr2 = [].concat(arr1);
        var tr;
        $.each(arr2, function(i, e) {
            tr = $('<tr>');
            tr.append("<td>" + "<button id='modalBtn" + i + "' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>");
            tr.append("<td>" + (e.Name || "") + "</td>");
            tr.append("<td>" + (e.Email || "") + "</td>");
            tr.append("<td>" + (e.Phone || "") + "</td>");
            $('#parentTableBody').append(tr);

            populateSchoolInfo(e);
        });
    }
    $('#myModal').on('show.bs.modal', function (e) {
       var idx = $(e.relatedTarget).closest('tr').index();
        $('#schoolModalBody tr').hide().eq(idx).show();
    });
});
function populateSchoolInfo(kid) {
    var tr;
    $.each(kid.Edu, function(j, v){
        tr = $('<tr>');
        tr.append("<td>" + (v.School || "") + "</td>");
        tr.append("<td>" + (v.Grade || "") + "</td>");
        tr.append("<td>" + (v.Job || "") + "</td>");
        tr.append("<td>" + (v.Martial || "") + "</td>");
        tr.append("<td>" + (v.ETC || "") + "</td>");
        $('#schoolModalBody').append(tr);
    });
}

function generateItem() {
    var kids = [{
        Name: "Gina",
        Email: "gina@email.com",
        Phone: "211-456-1234",
        Edu:[{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "}]
    },
        {
            Name: "Mark",
            Email: "mark@email.com",
            Phone: "144-411-2312",
            Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
        },
        {
            Name: "Jake",
            Email: "jake@email.com",
            Phone: "333-211-1111",
            Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
        }
    ];
    return kids;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />


<table id="parentTable">
    <thead>
    <tr class="category">
        <th></th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
    </thead>

    <tbody id="parentTableBody">
    </tbody>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h3>Info</h3>
                <div class="well well-sm overflow-auto">
                    <table class="table table-striped table-hover table-condensed" id="schoolTable">
                        <thead>
                        <tr>
                            <th>School</th>
                            <th>Grade</th>
                            <th>Job</th>
                            <th>Martial</th>
                            <th>Etc</th>
                        </tr>
                        </thead>
                        <tbody id="schoolModalBody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Just a quick question: If there are multiple arrays inside that one object,.....

在这种情况下，您可以在模态表中生成具有属性的行，以便属于同一学生的所有行都具有相同的属性。另一方面，您可以不使用 jQuery.eq()，而是按属性过滤:

$('#schoolModalBody tr').hide().filter('[studentidx=' + idx + ']').show();

$(document).ready(function () {
var arr1 = generateItem();
if (arr1) {
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function (i, e) {
        tr = $('<tr>');
        tr.append("<td>" + "<button id='modalBtn" + i + "' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>");
        tr.append("<td>" + (e.Name || "") + "</td>");
        tr.append("<td>" + (e.Email || "") + "</td>");
        tr.append("<td>" + (e.Phone || "") + "</td>");
        $('#parentTableBody').append(tr);

        populateSchoolInfo(i, e);
    });
}
$('#myModal').on('show.bs.modal', function (e) {
    var idx = $(e.relatedTarget).closest('tr').index();
    $('#schoolModalBody tr').hide().filter('[studentidx=' + idx + ']').show();
});
});
function populateSchoolInfo(idx, kid) {
var tr;
$.each(kid.Edu, function (j, v) {
    tr = $('<tr>', {studentidx: idx});
    tr.append("<td>" + (v.School || "") + "</td>");
    tr.append("<td>" + (v.Grade || "") + "</td>");
    tr.append("<td>" + (v.Job || "") + "</td>");
    tr.append("<td>" + (v.Martial || "") + "</td>");
    tr.append("<td>" + (v.ETC || "") + "</td>");
    $('#schoolModalBody').append(tr);
});
}

function generateItem() {
var kids = [{
    Name: "Gina",
    Email: "gina@email.com",
    Phone: "211-456-1234",
    Edu: [{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "},
        {School: "college2", Grade: "Freshmen2", Job: "Student2", Martial: "S2", ETC: "2"},
        {School: "college3", Grade: "Freshmen3", Job: "Student3", Martial: "S3", ETC: "3"}]
    },
    {
        Name: "Mark",
        Email: "mark@email.com",
        Phone: "144-411-2312",
        Edu: [{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
    },
    {
        Name: "Jake",
        Email: "jake@email.com",
        Phone: "333-211-1111",
        Edu: [{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
    }
];
return kids;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table id="parentTable">
    <thead>
    <tr class="category">
        <th></th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
    </thead>

    <tbody id="parentTableBody">
    </tbody>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h3>Info</h3>

                <div class="well well-sm overflow-auto">
                    <table class="table table-striped table-hover table-condensed" id="schoolTable">
                        <thead>
                        <tr>
                            <th>School</th>
                            <th>Grade</th>
                            <th>Job</th>
                            <th>Martial</th>
                            <th>Etc</th>
                        </tr>
                        </thead>
                        <tbody id="schoolModalBody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

关于javascript - Modal 内的表格每一行都填充，而不是单独填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52064010/

24 4 0
文章推荐： javascript - 将事件类添加到所选元素 Angular (可能有多个元素事件)
文章推荐： javascript - 动态更改 Dropzone url
文章推荐： javascript - react js如何防止方向键切换控件
文章推荐： javascript - 如果发布请求成功则关闭对话框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com