Question

我在对象内部有数组，我想在模式中为每一行相应地填充该特定数组（“ 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

谢谢

Answer 1

因此，如果用户单击“信息”模式按钮，则它应仅显示该特定数组（“ Edu”）。但是，我所有的数组都填充在每个模式中。

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

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

已添加代码：

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

更新的小提琴here

由于ID需要唯一，因此我建议在for循环中删除 id ='modalBtn'，或者，如果您不惜一切代价需要删除ID，我建议更改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>

一个简单的问题：如果一个对象中有多个数组，.....

在这种情况下，您可以在模态表中生成具有属性的行，以使属于同一学生的所有行都具有相同的属性。另一方面，您可以按属性过滤，而不必使用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 个答案: