Modal中的表填充到每一行，而不是单独填充

Question

I have arrays inside objects, and I want to populate that specific array ("Edu") in the modal accordingly for each row. 我在对象内部有数组，我想在模式中为每一行相应地填充该特定数组（“ Edu”）。 So, if a user clicks on a "Info" modal button, it should only display that certain array ("Edu"). 因此，如果用户单击“信息”模式按钮，则它应仅显示该特定数组（“ Edu”）。 However, all of my arrays are populated in every modal.. 但是，我所有的数组都填充在每个模式中。

I believe my problem is how I am putting the values of the array inside the table when I append the table rows. 我相信我的问题是当我追加表格行时如何将数组的值放入表格中。 It's putting everything inside the same table body. 它将所有内容放入同一表体内。

Would someone give me a help or a guidance on this? 有人会对此给予帮助或指导吗？ I do not have much experience with jQuery and a help would be really appreciated. 我没有jQuery的丰富经验，我们将不胜感激。

Here is the HTML: 这是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>

Here is the Javascript + jQuery: 这是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 的jsfiddle

Thank you 谢谢

Answer 1

So, if a user clicks on a "Info" modal button, it should only display that certain array ("Edu"). 因此，如果用户单击“信息”模式按钮，则它应仅显示该特定数组（“ Edu”）。 However, all of my arrays are populated in every modal.. 但是，我所有的数组都填充在每个模式中。

This happens because you populate the modal table at dom ready. 发生这种情况是因为在dom准备就绪时填充了模态表。

You can listen for show.bs.modal event in order to hide every row and show only the interested one. 您可以侦听show.bs.modal事件，以便隐藏每一行并仅显示感兴趣的行。

Code added: 添加的代码：

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

Updated fiddle here 在这里更新小提琴

Because IDs need to be unique I suggest to remove id='modalBtn' in your for loop or if you need them at all costs i suggest to change the button in for loop like: 因为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,..... 只是一个简单的问题：如果一个对象内有多个数组，.....

In this case you can generate the rows in the modal table with an attribute so that all the rows belonging to the same student have the same attribute. 在这种情况下，您可以使用属性生成模式表中的行，以便属于同一学生的所有行都具有相同的属性。 On the other side, instead of using jQuery.eq(), you can filter by attribute: 另一方面，您可以按属性过滤，而不必使用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>

Modal中的表填充到每一行，而不是单独填充

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-08-28 18:31:48

Modal中的表填充到每一行，而不是单独填充

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-08-28 18:31:48

解决方案1
2 已采纳 2018-08-28 18:31:48