问题:我有一个表格，显示大学类(class)的信息。左侧有一列，每行旁边都有一个 + 号。当按下此键时，我需要显示类(class)中所有学生的数据(我已准备好这些数据并等待)。但是，如何在屏幕上显示这一行新数据呢？我该如何再次折叠它？
代码:
$(document).ready(function(){
$.ajax({
url: 'http://xx.xxx.xxx.xx/getCourses.php',
dataType: 'jsonp',
jsonpCallback: "courses",
success: function( data ) {
courseData = data;
drawTable(data);
}
});
$("#dataTable").on('click', '.data-button',function(){
/* text change method */
$(this).text(function( _ , currText){
return currText === '+' ? '-' : '+';
});
/* class change */
$(this).toggleClass('active');
/* get data */
var id= $(this).data('id');
//Now reveal rows of students under this course.
var studentData = courseData.courses[id];
//HOW DO I EXPAND THE EXTRA DATA ROWS ONTO THE TABLE??
})
});
function drawTable(data) {
for (var i = 0; i < data.courses.length; i++) {
drawRow(data.courses[i]);
}
}
function drawRow(rowData) {
var button='<anyElement data-id="'+ rowData.id +'" class="data-button">+</anyElement>';
var row = $("<tr />")
row.append('<td>'+button+'</td>');/* no need to wrap html in "$()" */
/* append other cells*/
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.start + "</td>"));
row.append($("<td>" + rowData.end + "</td>"));
row.append($("<td>" + rowData.lecturer + "</td>"));
/* do append to DOM after row created , makes for less DOM insertions*/
$("#dataTable").append(row);
}
</script>
</head>
<body>
<table id="dataTable">
<tr>
<th>Course</th>
<th>Start</th>
<th>End</th>
<th>Lecturer</th>
</tr>
</table>
</body>
</html>
期望结果示例:
最佳答案
您的问题在学生数据的结构方面没有提供足够的细节，但尽管如此，我还是试图想出一些办法，只是为了展示显示/隐藏切换的工作原理。这是一个 JSBin:http://jsbin.com/wekepori/1/edit?html,js,output
编辑:我更新了我的答案，因为问题中提供了有关如何构建学生数据的新信息。请注意，在我的示例中，数据只是一个硬编码的字典，因为我没有可以使用包含您的数据的服务器后端。因此，必须添加检索学生的实际网络调用，而不是我的硬编码。
HTML:
<table id="dataTable" border="1">
<tr>
<th>Id</th>
<th>Course</th>
<th>Start</th>
<th>End</th>
<th>Lecturer</th>
</tr>
</table>
JavaScript:
$(document).ready(function(){
// $.ajax({
// url: 'http://xx.xxx.xxx.xx/getCourses.php',
// dataType: 'jsonp',
// jsonpCallback: "courses",
// success: function( data ) {
// courseData = data;
// drawTable(data);
// }
// });
var data = {
courses: [{
id: 1,
start: 0,
end: 0,
lecturer: "Mr. Smith"
},
{
id: 2,
start: 0,
end: 0,
lecturer: "Mr. Boon"
}]
};
var courseData = data;
drawTable(data);
$("#dataTable").on('click', '.data-button',function(){
var showStudentRow = $(this).text() === '+' ? true : false;
/* text change method */
$(this).text(function( _ , currText){
return currText === '+' ? '-' : '+';
});
/* class change */
$(this).toggleClass('active');
/* get data */
var id= $(this).data('id');
//Now reveal rows of students under this course.
//var studentData = courseData.courses[id];
//HOW DO I EXPAND THE EXTRA DATA ROWS ONTO THE TABLE?? see below v v
var studentData = [{
id: 23,
name: "Joe Bloggs"
},
{
id: 34,
name: "Marry Brown"
},
{
id: 55,
name: "Alan James"
}
];
if (showStudentRow) {
var trCourseRow = $(this).parent().parent();
var newStudentRow = addHeaderStudentRow(id, trCourseRow);
newStudentRow = addStudentRow(id, newStudentRow, studentData[0]);
newStudentRow = addStudentRow(id, newStudentRow, studentData[1]);
newStudentRow = addStudentRow(id, newStudentRow, studentData[2]);
}
else {
removeStudentRow(id);
}
});
});
function drawTable(data) {
for (var i = 0; i < data.courses.length; i++) {
drawRow(data.courses[i]);
}
}
function addHeaderStudentRow(courseRowId, courseRow) {
var row = $('<tr></tr>')
.css('font-weight', 'bold')
.addClass('student' + courseRowId)
.append('<td>Student Id</td><td colspan="4">Name</td>');
row.insertAfter(courseRow);
return row;
}
function removeStudentRow(courseRowId) {
$('.student' + courseRowId).remove();
}
function addStudentRow(courseRowId, courseRow, studentRowData) {
var row = $('<tr></tr>')
.css('font-weight', 'bold')
.addClass('student' + courseRowId);
row.append($('<td>' + studentRowData.id + '</td>'));
row.append($('<td colspan="4">' + studentRowData.name + '</td>'));
row.insertAfter(courseRow);
return row;
}
function drawRow(rowData) {
var button='<div data-id="'+ rowData.id +'" class="data-button">+</div>';
var row = $("<tr />");
row.append('<td>'+button+'</td>');/* no need to wrap html in "$()" */
/* append other cells*/
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.start + "</td>"));
row.append($("<td>" + rowData.end + "</td>"));
row.append($("<td>" + rowData.lecturer + "</td>"));
/* do append to DOM after row created , makes for less DOM insertions*/
$("#dataTable").append(row);
}
关于javascript - 如何在屏幕上展开新的表格数据行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24982251/