У меня есть массивы внутри объектов, и я хочу заполнить этот конкретный массив ("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
Спасибо