Modal中的表填充到每一行，而不是单独填充
[英]Table inside Modal is populated every row and not individually
问题描述
我在对象内部有数组，我想在模式中为每一行相应地填充该特定数组（“ 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;
}
谢谢
1 个解决方案
解决方案1
2 已采纳 2018-08-28 18:31:48
因此，如果用户单击“信息”模式按钮，则它应仅显示该特定数组（“ 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();
});
在这里更新小提琴
因为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>
只是一个简单的问题：如果一个对象内有多个数组，.....
在这种情况下，您可以使用属性生成模式表中的行，以便属于同一学生的所有行都具有相同的属性。 另一方面，您可以按属性过滤，而不必使用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>
onClick表行，其中包含onClick Button和Bootstrap Modal
[英]onClick table row with onClick Button and Bootstrap Modal inside
MUI-Datatable：可扩展行内的 TableHead 不断重复表格的每一行，表格不居中
[英]MUI-Datatable: TableHead inside Expandable Row keeps on repeating for every row of the table and table does not center
我有一个可点击的行打开一个模态，我希望模式用行的内容填充
[英]I have a clickable row that opens a modal, I would like the modal to be populated with the contents of the row
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.